Next.js (App Router)

Build production-grade, server-rendered websites and applications with Next.js 16. This skill encodes current App Router conventions from the official Next.js docs.

Principles

• File-system routing. Folders define URL segments; special files (page, layout, loading, error, not-found, route) define UI/behavior for that segment.
• Server-first. Layouts and Pages are React Server Components by default. Add "use client" only where you need interactivity, browser APIs, or state.
• Caching is opt-in and explicit. Cache with the use cache directive + cacheLife, stream fresh data with <Suspense>, and revalidate with cacheTag/updateTag.
• Navigation is optimized. <Link> prefetches and performs client-side transitions; add loading.tsx for streaming and partial prefetch of dynamic routes.

Scaffolding a project

npx create-next-app@latest my-app
# --yes: TypeScript, ESLint, Tailwind CSS, App Router, Turbopack, import alias @/*
cd my-app && npm run dev