Expert Next.js performance optimization skill covering Core Web Vitals, image/font optimization, caching strategies, streaming, bundle optimization, and Server Components best practices. Use when optimizing Next.js applications for Core Web Vitals (LCP, INP, CLS), implementing next/image and next/font, configuring caching with unstable_cache and revalidateTag, converting Client Components to Server Components, implementing Suspense streaming, or analyzing and reducing bundle size. Supports Next.
Detected risks:
Provides expert guidance for optimizing Next.js applications, centered on Core Web Vitals (LCP, INP, CLS), modern React patterns, Server Components, caching strategies, and bundle optimization, and targeting developers already familiar with React/Next.js who want production-grade optimizations. It supports Next.js 16 and React 19 patterns and covers image optimization with next/image, font optimization with next/font, caching via unstable_cache, revalidateTag, and ISR, Client-to-Server Component conversion, Suspense streaming, code splitting with dynamic imports, metadata and SEO, and route-handler optimization.
The recommended process starts with measurement: analyze current performance with Lighthouse, identify bottlenecks in Chrome DevTools or PageSpeed Insights, and prioritize by symptom — LCP issues point to images and fonts, INP issues to reducing JavaScript and using Server Components, and CLS issues to adding dimensions and using next/font. The skill then directs loading the relevant reference file for the area under work (image, font, caching, server components, streaming, bundle, metadata, API routes, or Next.js 16 patterns), applying quick patterns and before/after conversions, and verifying improvements with real metrics afterward. Core principles include preferring Server Components and only adding 'use client' when browser APIs or interactivity require it, pushing Client Components to leaf nodes, using Suspense boundaries to enable streaming, and caching with tags for granular revalidation.
Concrete worked examples ground the guidance: converting a Client Component that fetches in useEffect into an async Server Component with direct database access, marking an LCP hero image with next/image and priority, caching a query with unstable_cache and tags and invalidating it with revalidateTag in a server action, setting up next/font with subsets, display swap, and a CSS variable, and splitting a page into independent Suspense streaming sections. A conversions table summarizes high-value swaps and their benefits, such as moving from useEffect plus fetch to direct async data for roughly 70% less JS and faster TTFB, from an img tag to next/image, and from a static import of a heavy component to dynamic(). Best-practice lists detail recommendations for images, fonts, and caching, including blur placeholders, remotePatterns configuration, meaningful cache tags, and TTLs tied to data change frequency.
It supports Next.js 16 and React 19 patterns, and is aimed at developers already familiar with React/Next.js who want to apply production-grade optimizations.
Prioritize by Core Web Vitals symptom: LCP issues point to images and fonts, INP issues to reducing JavaScript and using Server Components, and CLS issues to adding dimensions and using next/font. The skill recommends measuring first with Lighthouse and identifying bottlenecks in Chrome DevTools or PageSpeed Insights.
Prefer Server Components over Client Components, replacing a useEffect plus fetch pattern with an async Server Component that accesses the database directly. The conversions table cites roughly 70% less JavaScript and faster TTFB, and only adds 'use client' when browser APIs or interactivity are required, keeping Client Components at leaf nodes.
It covers unstable_cache for expensive queries, revalidateTag for granular tag-based invalidation, ISR, and revalidatePath for route-level invalidation. Best practice is to use meaningful cache tags, implement on-demand revalidation for dynamic content, and set the TTL based on how often the data changes.
It recommends next/font instead of CSS font imports, specifying subsets to reduce size, using display swap for immediate text render, and creating a CSS variable via the variable option (then configuring Tailwind to use it). The example uses Inter with these settings to achieve zero CLS.
Quick Setup:
.claude/skills/Repository
giuseppe-trisciuoglio/developer-kit