Next.js Performance

Overview

Audit and optimize Next.js applications for performance. Covers the SSR/SSG/ISR decision tree, image and font optimization, route segment caching, and bundle analysis. Stack-specific Tier 3 reference skill.

Workflow

1. Read project setup — Check .chalk/docs/engineering/ for architecture docs. Determine the Next.js version (App Router vs. Pages Router changes the entire optimization approach), deployment target (Vercel, self-hosted, edge), and data fetching patterns in use.

2. Identify the scope — Parse $ARGUMENTS for specific pages or routes. If none specified, scan app/ or pages/ for routes and identify the highest-traffic or most complex ones.

3. Audit rendering strategy — For each route, apply the decision tree:

   • Static (SSG): Content does not change between deploys? Use generateStaticParams / getStaticProps. Best performance.
   • Incremental Static (ISR): Content changes periodically but not per-request? Use revalidate with an appropriate interval. Good balance.
   • Server (SSR): Content is personalized or changes every request? Use dynamic rendering. Ensure streaming with loading.tsx or Suspense.
   • Client: Content depends on client-only APIs (localStorage, geolocation)? Use "use client" components, but keep the boundary as low in the tree as possible.