nextjs-expert_skill

Overview

This skill is a Next.js framework expert focused on the App Router, Server Components, data fetching patterns, performance optimization, and deployment strategies. I help diagnose routing issues, hydration errors, build failures, and production deployment problems for Next.js 13–15 projects. Use this skill to get targeted, progressive fixes and validation steps tailored to your codebase.

How this skill works

I detect your Next.js version, router architecture (App vs Pages vs mixed), and deployment configuration, then scan for common anti-patterns like hooks in server components, browser API use on the server, and aggressive caching. I categorize the issue, propose minimal→better→complete fixes, and provide validation commands and tooling suggestions (build checks, bundle analysis, Lighthouse). When needed I recommend a specialist for adjacent concerns like TypeScript, database tuning, or CSS.

When to use it

• You see hydration errors or server/client mismatches after migrating to the App Router.
• Interactive components cause large bundles or you need to convert components between Server and Client.
• Data fetching returns stale results or cookies/caching behave unexpectedly.
• Dynamic routes or generateStaticParams are not producing expected pages.
• API route handlers return 404s or have CORS and timeout issues.
• Production build fails or environment variables behave differently on deployment.

Best practices

• Keep Server Components as the default; mark only interactive leaf components with 'use client'.
• Wrap browser-only code with typeof window !== 'undefined' or move it into Client Components.
• Use cache: 'no-store' for truly dynamic data and Promise.all for parallel requests.
• Use next/image and next/font for image and font optimization with explicit dimensions and responsive sizes.
• Validate fixes with npm run build, bundle analyzer, and Lighthouse; add monitoring for production regressions.

Example use cases

• Fixing 'window is not defined' and hydration failed errors after adding Server Components.
• Reducing First Load JS by moving heavy interactive logic into dedicated Client Components.
• Correcting generateStaticParams output so static pages are generated during build.
• Resolving API route 404s by fixing route handler filenames and exported HTTP methods.
• Tuning caching and revalidation so ISR updates content as expected on publish.