← Back to Blog

nextjs-performance-optimization

Fapskom IT

Published

3 min read

Next.js Performance Optimization: From Good to Blazing Fast

Next.js ships with powerful performance features out of the box, but understanding how they work — and how to configure them correctly — is what separates good apps from exceptional ones. This guide covers the strategies that matter most in 2026.

1. Embrace React Server Components (RSC)

The most impactful optimization in modern Next.js is moving data fetching to Server Components. They render on the server, so zero JavaScript is sent to the client for those components.

// app/blog/page.tsx — This is a Server Component by default
// No 'use client' directive = runs only on the server

async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 }, // Revalidate every hour
  });
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts(); // Direct async/await — no useEffect!

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

What you gain:

  • No client-side JavaScript for data fetching
  • Smaller bundle size
  • Faster Time to First Byte (TTFB)
  • Direct access to databases, file systems, and secrets

2. Strategic use client Usage

Not every component needs to be a Client Component. Only add 'use client' when you need:

  • Browser APIs (window, document, localStorage)
  • React hooks (useState, useEffect, useContext)
  • Event listeners
// ✅ Correct: push interactivity to leaf components
'use client';

export function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️ Liked' : '🤍 Like'}
    </button>
  );
}

// ❌ Wrong: making a whole page client-side for one interactive element
'use client';

export default function BlogPage() {
  // Now ALL data fetching moves to the client — slower!
  const [posts, setPosts] = useState([]);
  useEffect(() => { fetch('/api/posts').then(...) }, []);
  // ...
}

3. Image Optimization with next/image

The <Image> component from next/image automatically:

  • Serves images in WebP/AVIF format
  • Implements lazy loading by default
  • Prevents Cumulative Layout Shift (CLS) via width/height
import Image from 'next/image';

export function ArticleHero({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={1200}
      height={630}
      priority // Use for above-the-fold images (LCP element)
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,/9j/4AA..." // Tiny base64 preview
    />
  );
}

Key props:

  • priority — Disables lazy loading; use for the Largest Contentful Paint (LCP) element
  • sizes — Tells the browser what size the image renders at different breakpoints
  • quality — Default is 75; lower for background images, higher for hero images

4. Font Optimization

next/font eliminates layout shift caused by font loading and removes external network requests:

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

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
});

const mono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-mono',
  display: 'swap',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html className={`${inter.variable} ${mono.variable}`}>
      <body>{children}</body>
    </html>
  );
}

5. Code Splitting with next/dynamic

Large libraries should not be bundled into your initial JS payload. Use dynamic imports:

import dynamic from 'next/dynamic';

// The heavy chart library only loads when <Chart> is rendered
const Chart = dynamic(() => import('./Chart'), {
  loading: () => <div className="h-64 animate-pulse bg-neutral-800 rounded-xl" />,
  ssr: false, // Set false for browser-only libraries
});

export function Dashboard() {
  return (
    <section>
      <h2>Analytics</h2>
      <Chart />
    </section>
  );
}

6. Caching Strategies

Next.js 16 gives you granular control over caching:

// Static — cached indefinitely (default for static routes)
export const dynamic = 'force-static';

// Revalidate every 60 seconds (ISR)
export const revalidate = 60;

// Never cache — always fresh
export const dynamic = 'force-dynamic';

For individual fetch calls:

// Cache for 1 hour
const data = await fetch('/api/data', { next: { revalidate: 3600 } });

// No cache
const data = await fetch('/api/data', { cache: 'no-store' });

// Tag-based revalidation
const data = await fetch('/api/posts', { next: { tags: ['posts'] } });
// Later: revalidateTag('posts') to invalidate

7. Bundle Analysis

Before optimizing, measure. Install @next/bundle-analyzer:

npm install @next/bundle-analyzer

// next.config.ts
import bundleAnalyzer from '@next/bundle-analyzer';

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
});

export default withBundleAnalyzer(nextConfig);

Run with:

ANALYZE=true npm run build

8. Core Web Vitals Checklist

MetricTargetPrimary Cause of Failure
LCP (Largest Contentful Paint)< 2.5sUnoptimized images, slow server
CLS (Cumulative Layout Shift)< 0.1Missing width/height on images
INP (Interaction to Next Paint)< 200msHeavy JS on main thread
TTFB (Time to First Byte)< 800msSlow data fetching, no caching

9. Streaming with Suspense

Don't block the entire page for slow data fetches. Stream parts of the UI:

import { Suspense } from 'react';

export default function Page() {
  return (
    <main>
      <h1>Dashboard</h1> {/* Renders immediately */}

      <Suspense fallback={<StatsSkeletonLoader />}>
        <SlowStatsComponent /> {/* Streams in when ready */}
      </Suspense>
    </main>
  );
}

Putting It All Together

Performance in Next.js is a sum of many decisions:

  1. Default to Server Components — only add 'use client' when necessary
  2. Use next/image for all images — never <img>
  3. Use next/font for fonts — never external Google Fonts links
  4. Dynamic import large libraries
  5. Set appropriate cache policies per route and fetch call
  6. Stream slow UI with Suspense boundaries
  7. Measure with @next/bundle-analyzer and Chrome DevTools

Consistent application of these patterns will push your Lighthouse scores above 95 and your users will thank you. ⚡

← More Articles