Next.js App Router Explained

The App Router is a new routing system introduced in Next.js 13 that uses a file-system based router built on top of Server Components.

Key Features

The App Router includes features like:

• Layouts that preserve state and remain interactive
• Server Components for improved performance
• Streaming for faster page loads
• Nested routing with layouts
• Loading UI for streaming and Suspense

File Conventions

The App Router uses several special files:

• page.js: Creates a UI that is unique to a route
• layout.js: Creates shared UI for a segment and its children
• loading.js: Creates loading UI for a segment and its children
• error.js: Creates error UI for a segment and its children
• not-found.js: Creates UI for 404 errors