Next.js Performance Optimization: 10 Proven Techniques

Introduction 

1. Optimize Images Using next/image 

import Image from "next/image";

export default function ProductImage() {
  return (
    <Image
      src="/images/product.jpg"
      alt="Product"
      width={800}
      height={600}
      sizes="(max-width: 768px) 100vw, 800px"
      style={{ width: "100%", height: "auto" }}
    />
  );
}

Why it helps: 

• Generates appropriately sized image variants. 

• Can serve modern image formats when supported and configured. 

• Helps prevent layout shifts when dimensions are known. 

• Supports lazy loading for images that do not need to load immediately. 

2. Use Server Components Effectively 

export default async function ProductsPage() {
  const response = await fetch(
    "https://api.example.com/products"
  );
  const products = await response.json();

  return (
    <main>
      <h1>Products</h1>
      {products.map((product: { id: number; name: string }) => (
        <p key={product.id}>{product.name}</p>
      ))}
    </main>
  );
} 

3. Reduce JavaScript With Dynamic Imports 

'use client';

import dynamic from "next/dynamic";

const HeavyChart = dynamic(
  () => import("./HeavyChart"),
  { loading: () => <p>Loading chart...</p> }
);

export default function Dashboard() {
  return (
    <main>
      <h1>Analytics Dashboard</h1>
      <HeavyChart />
    </main>
  );
} 

4. Optimize Fonts With next/font 

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

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

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

5. Fetch Data in Parallel 

export default async function DashboardPage() {
  const [user, orders, stats] = await Promise.all([
    getUser(),
    getOrders(),
    getStats(),
  ]);

  return (
    <main>
      <h1>{user.name}</h1>
      <p>Orders: {orders.length}</p>
      <p>Revenue: {stats.revenue}</p>
    </main>
  );
} 

6. Use Caching and Revalidation Appropriately 

const response = await fetch(
  "https://api.example.com/products",
  { next: { revalidate: 60 } }
);
const products = await response.json(); 

const response = await fetch(
  "https://api.example.com/account",
  { cache: "no-store" }
); 

7. Improve Loading Experiences With Suspense and Streaming 

export default function Loading() {
  return (
    <main>
      <h1>Loading dashboard...</h1>
      <p>Please wait while your data loads.</p>
    </main>
  );
} 

Suspense can provide a fallback for a particular section: 

import { Suspense } from "react";
import RecentOrders from "./RecentOrders";

export default function DashboardPage() {
  return (
    <main>
      <h1>Dashboard</h1>
      <Suspense fallback={<p>Loading orders...</p>}>
        <RecentOrders />
      </Suspense>
    </main>
  );
} 

8. Reduce Unnecessary Dependencies 

• Prefer smaller, focused dependencies when appropriate. 

• Inspect the production bundle with a compatible bundle analyzer. 

• Measure before removing packages; package size on disk is not the same as browser bundle size. 

9. Choose the Right Rendering Strategy 

Static rendering 

Dynamic server rendering 

Client-side rendering 

Incremental Static Regeneration (ISR) 

10. Measure Performance With Lighthouse and Core Web Vitals 

Conclusion