DEV Community: Luan Dev

Understanding Caching in Next.js

Luan Dev — Fri, 25 Apr 2025 21:44:39 +0000

~ Index

Introduction
What is Caching in Next.js?
Request Memoization
Full Route Cache
Data Cache
Turbopack Cache
Bonus Tips
Conclusion

~ Introduction

Caching is like the espresso shot of performance in web apps, small and capable of turning your app from "aehh" to "WoW" in milliseconds. If you're building with Next.js, especially the App Router, you already get some seriously clever caching for free.

But what’s actually happening behind the scenes?

In this post, we’ll break down the four major caching mechanisms used in Next.js:

Request Memoization
Full Route Cache
Data Cache
Turbopack Cache

Let’s dive in!!!

~ What is Caching in Next.js?

In short: Next.js caches things so it doesn’t have to re-fetch or re-render stuff unnecessarily. Depending on the type of data and request, it uses different strategies. The goal?

Speed. Predictability. Scalability.

Let’s break them down.

~ Request Memoization

Ever call the same fetch() or DB query multiple times during a single render?

Next.js is like: “Yo bro! I already did that.”

Under the hood, it deduplicates fetches within the same request context.

Example:

app/page.tsx

const users = await getUsers(); // fetches from DB
const usersAgain = await getUsers(); // uses cached result, not another DB call

Works automatically
No config needed
Reduces server load

~ Full Route Cache

Static routes (like app/about/page.tsx) are fully cached.

That means:

The HTML is pre-rendered
Served instantly from an edge cache
Never hits your server (unless revalidated)

If you use export const revalidate = 3600, it’ll refresh every hour.

Or revalidate = 0 for dynamic routes.

This is the bread and butter of Incremental Static Regeneration (ISR).

// app/blog/[slug]/page.tsx
export const revalidate = 86400; // cache page for 1 day

Fast
Edge-cached
Smart refresh

~ Data Cache

When you fetch() inside a Server Component, Next.js caches the response.

This is especially useful when fetching from APIs or databases, it's smart enough to store and reuse those results across requests until you tell it otherwise.

// app/page.tsx
const res = await fetch('https://api.example.com/posts', {
  next: { revalidate: 60 }
});

Options:

revalidate: false = never cache
revalidate: 0 = fetch fresh every time
revalidate: 3600 = cache for 1 hour
Works only in Server Components
Cached globally

~ Turbopack Cache

This one’s for the devs who hit ctrl + S every 3 seconds.

Turbopack (Next.js's new bundler) caches your modules, transforms, and dependencies during development.

Why? So hot reloads are instant.

If Webpack was a bicycle, Turbopack is a Tesla.

It remembers:

Which files changed
Which parts of the tree need rebuilding
And skips everything else

No config needed. Just enjoy the speed.

You write code → it updates in <200ms
Love at first refresh

More about Turbopack

~ Bonus Tips

Let’s level up your caching game:

1. Use `revalidateTag()` and `unstable_cache()`

Want to manually bust cache from a route or action?

import { revalidateTag } from 'next/cache';

revalidateTag('posts');

Tag your fetches:

await fetch('/api/posts', { next: { tags: ['posts'] } });

Boom. Granular control.

2. Edge Functions = Edge Cache

Want truly global performance?

Deploy with Vercel and use edge functions — they cache and serve from closest regions to the user.

Latency = who?

3. Opt out of caching (when needed)

Not all data should be cached.

await fetch(url, { cache: 'no-store' });

Useful for dashboards, user-specific content, or live updates.

~ Conclusion

Here's what we covered:

Request Memoization
Full Route Cache
Data Cache
Turbopack Cache

Caching is one of those things where knowing the defaults = superpowers. Next.js does a lot for you, but now, you know how to control it.

Need help with revalidation strategies? Confused about dynamic content?

You know what to do.

Questions? Ideas? Cache bugs?

Drop them below 👇

Or just scream maybe I will hear it.

~ Luan

URL Shortener with Next.js Route Handlers + Prisma

Luan Dev — Thu, 24 Apr 2025 18:11:09 +0000

~ Index

Introduction
Tech Stack & Setup
Schema & Database
API Endpoint to Shorten URLs
Route Handler to Redirect
Optional UI with Client-side Form
Bonus Tips
Conclusion

~ Introduction

Ever sent someone a massive link that looks like it came out of a horror movie script?

It’s 2025. Links should be short and clean.

In this post, we’ll build a fully working URL shortener using the new Next.js App Router, Route Handlers, and Prisma with a SQLite database. The whole thing fits into just a few files.

No backend frameworks, no third-party services, just pure Next.js magic.

Let’s dive in!!!

~ Tech Stack & Setup

We’re keeping things light but modern:

Next.js (App Router)
TypeScript
Prisma (ORM)
SQLite (because dev should be fast)

Init your project

npx create-next-app@latest url-shortener --experimental-app --typescript
cd url-shortener

Install dependencies

npm install prisma @prisma/client
npx prisma init

Configure `.env`

DATABASE_URL="file:./dev.db"
NEXT_PUBLIC_BASE_URL="http://localhost:3000"

~ Schema & Database

Open prisma/schema.prisma and drop this in:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Link {
  id        Int      @id @default(autoincrement())
  slug      String   @unique
  url       String
  createdAt DateTime @default(now())
}

Create the database

npx prisma migrate dev --name init

That’s your backend. Done.

~ API Endpoint to Shorten URLs

File: app/api/shorten/route.ts

import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

function generateSlug(length = 6) {
  const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
}

export async function POST(request: NextRequest) {
  const { url } = await request.json();

  if (!url) return NextResponse.json({ error: 'Missing URL' }, { status: 400 });

  let slug = generateSlug();
  while (await prisma.link.findUnique({ where: { slug } })) {
    slug = generateSlug();
  }

  const record = await prisma.link.create({ data: { url, slug } });
  const shortUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/${record.slug}`;

  return NextResponse.json({ slug, shortUrl });
}

~ Route Handler to Redirect

File: app/[slug]/route.ts

import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function GET(request: NextRequest, { params }: { params: { slug: string } }) {
  const record = await prisma.link.findUnique({ where: { slug: params.slug } });
  if (!record) return new NextResponse('Not found', { status: 404 });
  return NextResponse.redirect(record.url);
}

Your links are now redirecting!!!!!!!!!!!

~ Optional UI with Client-side Form

You can just throw in a quick form on your homepage:

'use client';
import { useState } from 'react';

export default function Home() {
  const [url, setUrl] = useState('');
  const [short, setShort] = useState('');

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    const res = await fetch('/api/shorten', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ url }),
    });
    const data = await res.json();
    setShort(data.shortUrl);
  };

  return (
    <main className="flex flex-col items-center justify-center h-screen p-4">
      <h1 className="text-2xl mb-4">URL Shortener</h1>
      <form onSubmit={handleSubmit} className="flex space-x-2">
        <input
          type="url"
          required
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          placeholder="https://example.com"
          className="border p-2 rounded"
        />
        <button type="submit" className="bg-blue-500 text-white p-2 rounded">
          Shorten
        </button>
      </form>
      {short && <p className="mt-4">Short URL: <a href={short}>{short}</a></p>}
    </main>
  );
}

It then should look like this:

~ Bonus Tips

Little things to level up:

1. Custom Slugs

Want users to pick their own slugs (like mycoolsite.dev/bio)?

Just modify the API to accept an optional slug and check if it’s taken.

2. Analytics Tracking

Add a clicks field in the model, then increment it on redirect.

You’ll have your own tiny analytics dashboard.

3. Deploy with Vercel + PlanetScale (if scaling)

SQLite is fine for local dev, but for prod, go MySQL with PlanetScale or NeonDB for Postgres.

~ Conclusion

That’s it! You just built a fully working URL shortener with:

App Router Route Handlers
Prisma ORM
SQLite DB
One-click redirect magic
Optional UI

You are now ready to work for google (homeless shelter)

Wanna add auth? Rate limiting? QR codes? Let me know!

Got questions or ideas?

Drop ‘em below.

You know what to do.

NOW!

~ Luan

SEO in Next.js: The 2025 Edition 🔍

Luan Dev — Wed, 23 Apr 2025 18:19:36 +0000

~ Index

Introduction
Meta Tags with next/head
OpenGraph & Social Sharing
Structured Data with JSON-LD
Canonical URLs & Duplicate Prevention
Sitemaps and Robots.txt
2 Bonus Tips
Conclusion

~ Introduction

So your website loads fast, well that's cute. But can it rank?

If your site is invisible to Google or looks like trash when someone shares it on social media, you're leaving traffic (and maybe $$$) on the table. And no, just adding keywords isn't enough anymore. SEO in 2025 is a whole different kind of monster, you need: structured data, social previews, canonical URLs, sitemap hygiene the whole f*ing toolbox.

Good news: Next.js gives us a solid SEO foundation out of the box. But if you want to go from meh to damn, you gotta level up and get a little technical.

In this post, I’ll show you how to max out SEO in your Next.js app with:

Meta tags using next/head
OpenGraph tags for beautiful link previews
JSON-LD structured data for rich results
Canonical tags to prevent duplicates
Auto-generated sitemaps and robots.txt

And of course — a couple extra sauce tips at the end.

Let’s dive in!!!

~ Meta Tags with next/head

Google ain’t that smart, you gotta tell it what your page is about. Meta tags are like a short level up for each page. You use next/head to inject those tags into your <head>. It’s simple but really important.

Example:

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>Save this post!</title>
        <meta name="description" content="Like this post!" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <main>
        <h1>Hello Guys!</h1>
      </main>
    </>
  );
}

No need for external libraries. Just remember to write custom titles and descriptions per route if you don't put the Head component into the layout.tsx file like I just did.

Resources and more Information

Ever shared a link and it shows a broken image or weird title? That’s because you forgot OpenGraph tags. These tags control what platforms like Twitter, LinkedIn, WhatsApp, Discord etc. show when someone shares your site. Get these right and people will actually want to click.

Minimal OG Setup:

<Head>
  <meta property="og:title" content="Check this out!" />
  <meta property="og:description" content="The best SEO guide for Next.js in 2025." />
  <meta property="og:image" content="https://mycdn.com/preview.png" />
  <meta property="og:url" content="https://dev.to/luan_dev" />
  <meta property="og:type" content="website" />
</Head>

Bonus: Add Twitter tags too

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@luan_ajeti" />

OG Docs if you’re bored

~ Structured Data with JSON-LD

Wanna show up with FAQ boxes, star ratings, breadcrumbs in search results?Structured data is your secret weapon. And Google wants it in JSON-LD format. You can just type it in manually via next/head.

Injecting Schema Markup:

<Head>
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{
      __html: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "Article",
        headline: "Next.js SEO Guide 2025",
        author: {
          "@type": "Person",
          name: "Luan aka. the best Dev",
        },
        datePublished: "2025-04-23",
      }),
    }}
  />
</Head>

Real-world tip: Use schema.org to find types that fit your content (e.g., BlogPosting, Product, Course, FAQPage, etc.)

~ Canonical URLs & Duplicate Prevention

Google gets confused when the same content is available under multiple URLs. (With or without www, trailing slashes, etc.). That’s why you gotta use canonical URLs, they tell Google “yo, THIS is the real one”.

Setup:

<Head>
  <link rel="canonical" href="https://mysite.com/blog/seo-2025" />
</Head>

This is especially important for paginated content, sort filters, or marketing UTM links that technically generate duplicate content.

more Information

~ Sitemaps and Robots.txt

Sitemaps = helping Google crawl your site

Robots.txt = telling Google what NOT to crawl

Let’s automate this stuff.

Step 1: Install next-sitemap

npm install next-sitemap

Step 2: Create `next-sitemap.config.js`

module.exports = {
  siteUrl: 'https://mysite.com',
  generateRobotsTxt: true,
};

Step 3: Add to your `package.json`

"scripts": {
  "postbuild": "next-sitemap"
}

Now every time you build, you’ll get /public/sitemap.xml + /public/robots.txt for free.

Full next-sitemap docs

~ 2 Bonus Tips

Little things, big impact.

1. Avoid Indexing Draft Routes

Preview routes, internal tools, staging pages? You don’t want them on Google.

<Head>
  <meta name="robots" content="noindex, nofollow" />
</Head>

Use this on /drafts, /preview, /dashboard, etc.

2. Always Use Absolute URLs in Metadata

Relative paths like /preview.png might break previews. Always use full URLs for og:image, canonical, etc.

<meta property="og:image" content="https://mysite.com/og-image.png" />

~ Conclusion

SEO in Next.js isn't about tricking the System, but to know it. You tell search engines what your site is, how to read it, and how to show it off to the world.

Here’s a quick recap of what we covered:

Meta tags for content and previews
OpenGraph for rich social shares
Structured data for sexy SERPs
Canonicals to avoid duplicate hell
Auto-sitemaps and robots.txt
Bonus tips to keep it clean and pro

Don’t wait until your site is live to think about SEO! build it in from day one.

Got any questions or SEO tricks?

Then comment bro, don't waste your time.

NOW!

~ Luan

Optimizing Performance in Next.js 🏎️

Luan Dev — Tue, 22 Apr 2025 19:27:29 +0000

~ Index

Introduction
Image Optimization with next/image
Lazy Loading Content the Right Way
Font Optimization with next/font
Dynamic Imports for Component Splitting
2 Bonus Tips
Conclusion

~ Introduction

The thing we all hate is when the Website takes too long to load and especially when you have your own website the last thing you want to hear from your visitors is that your Website is slow AF.

Performance is crucial for improved SEO rankings, better user experience, and increased conversions. With Core Web Vitals becoming a key part of Google’s search algorithm, even small optimizations that you can take in Next.js can have a measurable impact on your product’s visibility and success. Next.js has from all the react Frameworks the best Performance architecture, from automatic code splitting and server-side rendering to built-in image optimization and edge-ready middleware. But to truly unlock its potential, you have to dig deeper and fine-tune the details.

In this guide, I’ll walk you through real-world techniques for optimizing your Next.js app, including:

Image optimization with next/image
Lazy loading for heavy components
Font loading with next/font
Dynamic imports for smarter bundle sizes

Whether you're building a SaaS dashboard, a blog, or a content-heavy web app, these tips will help you squeeze out every bit of performance and deliver a faster, smoother experience to your users.

Let’s dive in!!!

~ Image Optimization with next/image

To not tortue your Website Visitor with endless waiting untill the 6MB Image is finally loaded, Next.js came up with a optimization which drastically reduces the load time, improves Largest Contentful Paint (LCP), and cut down on bandwidth usage, especially for mobile users. In addition, it's responsive (On-demand image resizing) and it prevents layout shift from happening when images are loading.

How?

Instead of using the conventional <img /> tag, we can use the <Image /> Component from Next.js. You first import the Image Component from Next.js:

import Image from 'next/image'

and then you can either pass your local Image or a Remote Image in the src parameter:

Local Image

import Image from 'next/image'
import profilePic from '../public/me.png'

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

Remote Image

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

Resources and further information

~ Lazy Loading Content the Right Way

When you hear Lazy Loading, just think of a technique where resources (like images, JavaScript, or CSS) are loaded only when they're needed, rather than loading everything at once when the page loads. It's crucial for your website's performance because it reduces initial load time, saves bandwidth, and improves user experience, especially on slower networks or less powerful devices.

When?

You should use Lazy loading for:

Images (see Chapter 1)
Heavy components (charts, maps, video players, etc.)
Third-party scripts and widgets (ads, comment sections, etc.)

Example:

We create a Chart Component which will be lazy loaded with dynamic from Next.js into the page.tsx component.

/components/Chart.tsx

export default function Chart() {
  return <div>chart component!</div>;
}

/app/Page.tsx

import dynamic from 'next/dynamic';
import { useState } from 'react';

// Lazy load the Chart component
const LazyChart = dynamic(() => import('../components/Chart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false, // optional: disables server-side rendering for this component
});

export default function Home() {
  const [showChart, setShowChart] = useState(false);

  return (
    <div>
      <h1>Welcome to the dashboard</h1>
      <button onClick={() => setShowChart(true)}>Show Chart</button>
      {showChart && <LazyChart />}
    </div>
  );
}

Real-world tip:
Combine lazy loading with viewport detection (react-intersection-observer or useInView), so the Lazy Loading will only start loading when the component is in the sight of the user.

Resources and further information

~ Font Optimization with next/font

Fonts can make a whole lot of chaos in your design symmetry and performance if they're not handled properly. Custum fonts, especially when loaded from external sources often evoke *FOIT *(Flash of Invisible Text), *FOUT *(Flash of Unstyled Text), or layout shifts, which can all F up your Core Web Vitals.

Why?

FOIT (Flash of Invisible Text): The browser waits to display text until the font loads which leads to leaving a blank screen.
FOUT (Flash of Unstyled Text): The text first renders in a fallback font, then snaps into the custom font which causes visible flickers.
Layout Shifts: If the fallback font has different metrics (line height, width), the layout visibly jumps once the custom font loads which then leads to impacting Cumulative Layout Shift (CLS).

Next.js suprisingly has a solution for this! Next.js introduced the next/font module, which replaces old school font loading methods like @import or . Its perfectly for performance improvements and also SSR-friendly. It only loads required subsets and weights, keeping bundles small and works just fine with both, local and Google Fonts.

Example: app/layout.tsx

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'], // only load what's needed
  display: 'swap',    // optional: allows fallback text to show
});

export const metadata = {
  title: 'Follow me on Twitter: luan_ajeti',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Resources and further information

~ Dynamic Imports for Component Splitting

We often include components that users don’t need immediately like e.g. charts, modals, dashboards etc. Loading them all upfront can lead to huge JavaScript bundles, longer load times, and slow performance. That's where Bundle Splitting comes into the game. It reduces initial JavaScript payload, improves FCP (First Contentful Paint) and TTI (Time to Interactive) and it also helps the browser to prioritize critical UI first.

How?

Create a Dynamic Component:

export default function ComponentSplitting() {
  return <p>Comment if you got any questions!</p>;
}

Use Dynamic on ComponentSplitting() Component:

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/ComponentSplitting'), {
  loading: () => <p>Loading...</p>,
});

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <DynamicComponent />
    </div>
  );
}

Resources and further information

~ 2 Bonus Tips

Beyond image optimization, lazy loading, font handling, and dynamic imports, there are a few more tweaks you can do that are effortles but have a high impact which you can apply to improve performance in your Next.js app.

1. Enable Compression with next.config.js

If you're self-hosting (e.g., with Node or Docker), enabling Gzip or Brotli compression can significantly reduce the size of your responses.

However, Next.js doesn’t handle compression itself — you need to enable it in your server layer (like Express or Nginx).

If you're using a custom Express server:

server.js

const express = require('express');
const compression = require('compression');

const app = express();
app.use(compression());

If you're deploying on Verce it's being automatically taken care of.

2. Analyze Your Bundle Size

Want to see what's bloating your app? Use next-analyze to visualize and optimize your JavaScript bundles.

Install:

npm install --save-dev @next/bundle-analyzer

Add to next.config.js:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // Your Next.js config
});

Run the build:

ANALYZE=true next build

You'll get an interactive treemap of your bundle size at http://localhost:8888

~ Conclusion

Optimizing performance in a Next.js application doesn’t have to be overwhelming, it’s often about applying the right techniques at the right time and place. By using tools like next/image, next/font, and dynamic imports strategically, you can significantly improve load times, responsiveness, and Core Web Vitals across the board.

Here’s a quick recap of what we covered:

Optimized images reduce LCP and improve visual stability.
Lazy loading keeps initial loads fast and efficient.
Font optimization prevents layout shifts and reduces blocking time.
Dynamic imports help split code and load only what’s needed.
Bonus tips: compression and bundle analysis

Performance isn't just about passing Lighthouse scores but more about delivering a smoother, faster experience that respects your users time and devices. Whether you're building a side project or scaling a production app, these techniques will help you get the most out of Next.js.

Got any questions or performance tricks of your own? Feel free to share them in the comments!

~ Luan

DEV Community: Luan Dev

Understanding Caching in Next.js

~ Index

~ Introduction

~ What is Caching in Next.js?

~ Request Memoization

~ Full Route Cache

~ Data Cache

~ Turbopack Cache

~ Bonus Tips

1. Use revalidateTag() and unstable_cache()

2. Edge Functions = Edge Cache

3. Opt out of caching (when needed)

~ Conclusion

Questions? Ideas? Cache bugs?

URL Shortener with Next.js Route Handlers + Prisma

~ Index

~ Introduction

~ Tech Stack & Setup

Init your project

Install dependencies

Configure .env

~ Schema & Database

Create the database

~ API Endpoint to Shorten URLs

~ Route Handler to Redirect

~ Optional UI with Client-side Form

~ Bonus Tips

1. Custom Slugs

2. Analytics Tracking

3. Deploy with Vercel + PlanetScale (if scaling)

~ Conclusion

Got questions or ideas?

SEO in Next.js: The 2025 Edition 🔍

~ Index

~ Introduction

~ Meta Tags with next/head

Example:

~ OpenGraph & Social Sharing

Minimal OG Setup:

~ Structured Data with JSON-LD

Injecting Schema Markup:

~ Canonical URLs & Duplicate Prevention

Setup:

~ Sitemaps and Robots.txt

Step 1: Install next-sitemap

Step 2: Create next-sitemap.config.js

Step 3: Add to your package.json

~ 2 Bonus Tips

1. Avoid Indexing Draft Routes

2. Always Use Absolute URLs in Metadata

~ Conclusion

Got any questions or SEO tricks?

Optimizing Performance in Next.js 🏎️

~ Index

~ Introduction

~ Image Optimization with next/image

How?

~ Lazy Loading Content the Right Way

When?

Example:

~ Font Optimization with next/font

Why?

~ Dynamic Imports for Component Splitting

How?

~ 2 Bonus Tips

1. Enable Compression with next.config.js

2. Analyze Your Bundle Size

~ Conclusion

Got any questions or performance tricks of your own? Feel free to share them in the comments!

1. Use `revalidateTag()` and `unstable_cache()`

Configure `.env`

Step 2: Create `next-sitemap.config.js`

Step 3: Add to your `package.json`