1. Embrace Static Generation Wherever Possible

Static pages are served straight from the CDN edge, avoiding server work and database round‑trips.

export async function getStaticProps() {
const posts = await getAllPosts()
return { props: { posts }, revalidate: 60 }
}

2. Turbo‑charge Images with next/image

Switching from plain <img> tags to next/image yielded a 42 point boost in our Largest Contentful Paint (LCP) score.

3. Split & Lazy‑Load Heavy Bundles

Use dynamic imports so rarely‑visited components are fetched only when needed:

import dynamic from 'next/dynamic'
 
const MonacoEditor = dynamic(() => import('@/components/MonacoEditor'), {
loading: () => <p>Loading editor…</p>,
ssr: false,
})

4. Cache _api Responses with @vercel/edge-config

A tiny helper turns expensive API calls into micro‑cached edge requests:

export default cache(async function getSettings() {
return fetch('https://api.example.com/settings').then((r) => r.json())
})

5. Turn On Middleware for Early Redirects

Middleware lets you short‑circuit requests (AB tests, auth) before React even boots, saving ~30–50 ms per request.

7. Shrink CSS with Tailwind JIT & @next/font

Purge unused styles automatically and self‑host critical fonts to avoid third‑party latency.

8. Prefetch Smartly—But Not Blindly

next/link’s prefetch is great, yet can hurt when every link on a long page preloads at once. Disable it selectively:

<Link href={slug} prefetch={false}>{title}</Link>

9. Monitor Real‑User Metrics (RUM)

Ship web-vitals to your analytics provider so you optimise what real users see, not just lab scores.

10. Automate Audits in CI

Fail the build if performance regresses:

lighthouse-ci https://localhost:3000 --assert.performance=0.9

• Next.js
• Performance
• Web Vitals
• Optimization