Nextjs Performance

Next.js Performance

Expert guidance for optimizing Next.js applications.

Quick Reference

What Do You Need?

1. Image optimization - next/image usage, sizing, formats
2. Font loading - next/font, preloading
3. Code splitting - Dynamic imports, route splitting
4. Caching - ISR, revalidation, cache strategies
5. Navigation - Link usage, prefetching

Specify a number or describe your performance concern.

Routing

Essential Principles

Optimize images: Use next/image with width/height for all images. Prevents CLS and enables automatic optimization.

Self-host fonts: Use next/font to eliminate requests to external font services and prevent layout shift.

Dynamic import heavy code: Use next/dynamic for components that are heavy or not immediately visible.

Client-side navigation: Use Link component for all internal links. Enables instant page transitions.

Cache strategically: Use appropriate fetch caching (force-cache, no-store, revalidate) based on data freshness needs.

Common Performance Issues

Code Patterns

Images

// Good: next/image with sizing
import Image from 'next/image'

<Image
  src="/avatar.jpg"
  width={100}
  height={100}
  alt="Avatar"
  priority // For above-fold images
/>

Fonts

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

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

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

Dynamic Imports

// Good: Dynamic import for heavy component
import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <div>Loading...</div>,
  ssr: false, // If client-only
})

Caching

// Good: Appropriate caching
export const revalidate = 3600 // Revalidate every hour

async function getData() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // or { revalidate: 0 } for no cache
  })
  return res.json()
}

Reference Index

Success Criteria

Performance is good when:

• All images use next/image with proper sizing
• Fonts loaded with next/font (no layout shift)
• Heavy components dynamically imported
• Static data cached appropriately (revalidate set)
• All internal links use Link component
• LCP < 2.5s, FID < 100ms, CLS < 0.1

Converted and distributed by TomeVault — claim your Tome and manage your conversions.