Next.js Performance Optimization Guide

1. Use Static Rendering Wherever Possible

Make pages static by default.

Example:

fetch(url, { next: { revalidate: 60 } })

This:

• Caches the page

• Rebuilds every 60 seconds

• Improves TTFB

• Reduces server cost

Static + ISR = Best balance for blogs, products, landing pages.

2. Keep Components Server-First

By default, App Router uses Server Components.

Keep it that way.

Use "use client" only when:

• You need interactivity

• You use state

• You handle user events

Server Components:

• Send zero JS to browser

• Improve load time

• Reduce bundle size automatically

3. Implement Proper Caching Strategy

Use caching intentionally.

Options:

• revalidate → ISR

• cache: "force-cache" → Full cache

• cache: "no-store" → Always dynamic

Example:

fetch(url, { cache: "force-cache" })

Define caching per page based on data volatility.

4. Use Next.js Image Optimization

Always use:

import Image from "next/image";

Example:

<Image
  src="/hero.jpg"
  width={1200}
  height={800}
  alt="Hero"
  priority
/>

What this gives you:

• Lazy loading

• Responsive resizing

• Automatic format optimization

• Reduced bandwidth usage

5. Use Built-in Font Optimization

Load fonts like this:

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

const inter = Inter({ subsets: ["latin"] });

This:

• Self-hosts fonts

• Reduces layout shift

• Improves CLS score

• Removes external blocking requests

6. Reduce JavaScript Bundle Size

Control what gets sent to the browser.

Practical actions:

• Keep client components small

• Avoid importing entire libraries

• Import only required modules

• Keep state localized

You can analyze bundle size with:

next build

Then inspect output size.

7. Use Dynamic Imports for Heavy Components

Load large components only when needed.

Example:

import dynamic from "next/dynamic";

const Chart = dynamic(() => import("./Chart"), {
  ssr: false,
});

Use for:

• Charts

• Maps

• Editors

• Complex dashboards

This improves initial load time.

8. Fetch Data at the Page Level

Centralize fetching.

Example:

export default async function Page() {
  const data = await getData();
  return <Component data={data} />;
}

Benefits:

• Prevents duplicate requests

• Avoids request waterfalls

• Keeps rendering predictable

9. Improve Core Web Vitals

Focus on:

LCP

• Optimize hero image

• Use priority for main image

• Reduce blocking JS

CLS

• Set fixed image sizes

• Use optimized fonts

• Avoid layout shifts

INP

• Reduce client-side JS

• Keep event handlers lightweight

• Memoize expensive components

10. Optimize Database & API Responses

Performance also depends on backend.

Practical steps:

• Fetch only required fields

• Use pagination

• Cache repeated queries

• Add proper database indexes

• Avoid nested heavy queries

11. Use CDN & Compression

Deploy with:

• CDN enabled

• Brotli compression

• HTTP/2 or HTTP/3

• Edge caching when possible

If using Vercel:
Most of this is automatic.

12. Measure Performance Regularly

Use:

• Lighthouse

• PageSpeed Insights

• Chrome DevTools Performance tab

Target:

• Performance score above 90

• LCP under 2.5s

• CLS under 0.1

Measure after every major feature.

Final Production Performance Blueprint

✔ Static rendering first
✔ Server Components by default
✔ Clear caching strategy
✔ Optimized images
✔ Optimized fonts
✔ Reduced JS
✔ Dynamic imports for heavy UI
✔ Clean data fetching
✔ CDN enabled
✔ Performance monitored