nextjs-app-router-fundamentals

Migrate Next.js apps from Pages Router to App Router with routing patterns.

Updated Jun 17, 2025
One-click install
npx skills add https://github.com/KlotzJesse/krauss-map --skill nextjs-app-router-fundamentals-klotzjesse
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router-fundamentals
Source: https://github.com/KlotzJesse/krauss-map/tree/main/.agents/skills/nextjs-app-router-fundamentals
Command: npx skills add https://github.com/KlotzJesse/krauss-map --skill nextjs-app-router-fundamentals-klotzjesse

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides developers through Next.js App Router fundamentals and migration from Pages Router, reducing confusion when implementing layouts, routing, and metadata in Next.js 13+ apps.

Core Features & Use Cases

  • Migration guidance from Pages Router to App Router, including layout and nested routing patterns
  • Metadata handling, dynamic routes, and route groups
  • Clear conventions and best practices for server components and client components in App Router

Quick Start

Set up a new Next.js 13+ app using App Router and scaffold root layout and routes to start migrating from Pages Router.

Frequently Asked Questions about nextjs-app-router-fundamentals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate from Next.js Pages Router to App Router?▼

Next.js App Router migration involves adopting new file conventions for nested routing, restructuring layouts, and adjusting component boundaries to support server components and metadata management in Next.js 13+.

What is the difference between server components and client components in Next.js App Router?▼

Server components and client components in the Next.js App Router differ by execution location; this guidance establishes clear conventions and best practices for structuring both to ensure scalable and maintainable apps.

How do I handle dynamic routes and route groups in Next.js 13+?▼

Handling dynamic routes and route groups in Next.js 13+ requires using specific App Router file conventions to organize nested routing structures and manage metadata without affecting the URL path.

What is the best way to manage metadata across a Next.js App Router application?▼

The best way to manage metadata in a Next.js App Router application is using the built-in metadata API within your layout and route files to define requirements for proper metadata handling across the app.

Do I need to scaffold a new app to use Next.js App Router layouts?▼

You do not need to scaffold a completely new app; you can set up App Router in an existing Next.js 13+ project by creating a root layout and incrementally migrating routes from the Pages Router.