Optimizing Next.js App Router for Production Performance

Performance is the foundation of user retention. If a portfolio page loads slowly, users click away. In this guide, we will cover strategies to ensure your Next.js application registers above 93+ scores on Lighthouse.

1. Maximize Server Component Usage

React Server Components (RSC) allow you to query data, format dates, and parse contents entirely on the server, sending zero client-side JavaScript for those blocks. Only use the "use client" directive for components that require active event handlers, hooks, or context APIs.

• **Server Component (Default):** Static content, headers, data records, footers.
• **Client Component:** Toggles, search bars, inputs, modals, slider navigation.

2. Image Optimization with next/image

Do not use raw <img /> tags. Next.js has an optimized Image element that serves responsive, modern formats like WebP or AVIF, with automatic size resizing based on layout space.

import Image from "next/image";

export const ProfileAvatar = () => (
  <Image
    src="/profile-photo.jpg"
    alt="Manoj Sarna"
    width={200}
    height={200}
    priority
    className="rounded-full object-cover"
  />
);

The priority attribute tells Next.js to preload this image, which improves the **Largest Contentful Paint (LCP)** metric significantly for hero sections.

3. Font Preloading

By loading Google Fonts using next/font, Next.js hosts the font assets locally, injects CSS variables directly, and ensures there is no layout shifting (CLS) on paint.

4. Debounce and Lazy Load Client Scripting

For heavier interactive pages or components, use Next.js Dynamic Imports to fetch the script only when the component is ready to mount:

import dynamic from "next/dynamic";

const HeavyCharts = dynamic(() => import("./HeavyCharts"), {
  ssr: false,
  loading: () => <p>Loading stats...</p>
});

Final Checklist

Before publishing, run a production build: ``bash npm run build `` Inspect the bundle size outputs, map routes that compile statically (○), and optimize heavy packages to keep client payloads lightweight.