nextjs-app-router-fundamentals

App Router migration converts your pages directory structure to the app directory with layout.tsx and page.tsx files. Move existing pages, update imports, and configure root layout with metadata exports. The migration enforces Next.js 13+ conventions including proper file placement and TypeScript typing.

Create a root layout.tsx at app/layout.tsx that wraps your entire application and exports metadata configuration. Nested layouts apply to specific route segments. Metadata exports replace next/head, defining title, description, and Open Graph tags at the layout or page level.

Dynamic routes use bracket syntax: app/posts/[id]/page.tsx captures individual posts. Catch-all routes use app/docs/[[...slug]]/page.tsx to match multiple segments. App Router handles nested routes automatically based on folder structure and applies route group patterns with parentheses for logical organization.

Yes. App Router is server-first by default, supporting server actions for mutations and data fetching. TypeScript best practices include strict typing for route parameters, metadata exports, and layout props. The Skill enforces proper conventions for type safety across your routing structure.

App Router replaces file-based routing with a directory structure using layout.tsx and page.tsx files. It supports nested layouts, parallel routes, and route groups for complex UIs. Metadata and server actions are native; Pages Router required separate configuration and the next/head component.

No. Next.js supports both routers simultaneously during migration. You can incrementally move pages from pages/ to app/ directory while keeping existing Pages Router pages functional. This allows gradual adoption of App Router conventions without full project rewrites.