How to Optimize a Next.js App

Optimize your Next.js web app to make it lightning fast — from image optimization to code splitting and caching strategies.

Why Performance Matters

A slow web app loses users. Studies show that a 1-second delay in page load time can reduce conversions by 7%. Next.js gives you powerful tools to make your app blazing fast — but you need to use them correctly.

1. Use the Next.js Image Component

Replace all <img> tags with Next.js's built-in <Image> component. It automatically handles lazy loading, modern formats (WebP/AVIF), and responsive sizing.

tsx

import Image from 'next/image'

export default function Hero() {
  return (
    <Image
      src="/hero.png"
      alt="Hero"
      width={800}
      height={400}
      priority
    />
  )
}

2. Code Splitting with Dynamic Imports

Don't load everything upfront. Use next/dynamic to lazy-load heavy components:

tsx

import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('@/components/Chart'), {
  loading: () => <p>Loading...</p>,
  ssr: false,
})

3. Leverage Server Components

In Next.js 13+, components are Server Components by default. Keep data fetching on the server — it reduces JavaScript sent to the client and improves Time to First Byte (TTFB).

tsx

// This runs on the server — no useEffect needed
export default async function Page() {
  const data = await fetch('https://api.example.com/data')
  const json = await data.json()
  return <div>{json.title}</div>
}

4. Use Route Segment Caching

Cache your API responses and page segments using the revalidate option:

typescript

// app/page.tsx
export const revalidate = 3600 // revalidate every hour

export default async function Page() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 },
  })
  return <div>...</div>
}

5. Optimize Fonts

Use next/font to load Google Fonts with zero layout shift and automatic subsetting:

typescript

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

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

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

6. Analyze Your Bundle

Install @next/bundle-analyzer to visualize what's making your bundle large:

bash

npm install @next/bundle-analyzer
ANALYZE=true npm run build

Conclusion

Performance is not a one-time fix — it's a habit. Start with images and fonts, then move to code splitting and caching. Your users (and your Lighthouse score) will thank you.