10 Next.js Performance Tips I Use in Every Project

Performance is not a feature — it's a foundation. Over the past few years building production Next.js apps, I've collected a set of practices that consistently improve Core Web Vitals, reduce bundle sizes, and keep apps snappy for real users.

The built-in Image component handles lazy loading, srcset, and format conversion automatically. Never use a raw tag for user-facing images.

import Image from 'next/image'

<Image src="/hero.png" alt="Hero" width={1200} height={630} priority />

App Router defaults to Server Components. Keep 'use client' at the leaf level — only components that need interactivity should run in the browser.

Each route in the App Router is automatically code-split. Avoid importing heavy libraries inside shared layouts — they'll bloat every page.

Deduplicating data fetches across components in the same render tree is free with React cache. For cross-request caching, use next/cache.

import { unstable_cache } from 'next/cache'

const getUser = unstable_cache(
  async (id) => db.user.findUnique({ where: { id } }),
  ['user'],
  { revalidate: 60 }
)

Audit your bundle with @next/bundle-analyzer. Replace large client libraries with server-rendered alternatives wherever possible.