10 Next.js Performance Tips We Use in Production

Why performance matters

Every 100ms of latency costs conversions. At Softween we target Lighthouse 100 on every project we ship. Here are the techniques we rely on.

1. Use static export when you can

Next.js output: "export" generates pure HTML at build time. No server, no cold starts, instant edge delivery via Cloudflare Pages.

// next.config.js
const nextConfig = {
  output: "export",
  trailingSlash: true,
}

2. Lazy load heavy components

Use next/dynamic with ssr: false for components that are not needed on first paint.

const Chart = dynamic(() => import('@/components/Chart'), { ssr: false })

3. Optimize images at build time

With images.unoptimized: true on static export, use sharp to pre-optimize all images during the build step.

4. Prefer CSS transforms

Animate transform and opacity only — never width, height, or top/left.

5. Preload critical assets

<link rel="preload" href="/logo.svg" as="image" type="image/svg+xml" />

6. Use content-visibility: auto

Apply to below-the-fold sections to skip rendering work until the user scrolls there.

7. Remove console.log in production

compiler: { removeConsole: process.env.NODE_ENV === "production" }

8. Optimize package imports

experimental: {
  optimizePackageImports: ["lucide-react", "framer-motion"],
}

9. Prefetch DNS for external domains

<link rel="dns-prefetch" href="https://api.example.com" />

10. Measure first — then optimize

Use Lighthouse CI in your GitHub Actions pipeline to catch regressions automatically. We block merges if any score drops below 90.

These techniques are baked into every project at Softween. If you want us to audit your app's performance, get in touch.