> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/vercel/next.js/llms.txt
> Use this file to discover all available pages before exploring further.
# Introduction
> Next.js App Router is a React framework for building full-stack web applications. Learn what it is, why to use it, and how to get started.
Next.js is a React framework that gives you building blocks to create full-stack web applications. You write your UI using React components, and Next.js adds structure, optimizations, and infrastructure on top.
The **App Router** is the current recommended way to build Next.js applications. It is built on top of React Server Components and supports layouts, nested routing, loading states, error handling, and more.
## Why use the App Router?
Pages and layouts render on the server, reducing the JavaScript sent to the browser and improving initial load performance.
Routes are defined by the folder structure inside the `app` directory. No configuration needed.
Layouts wrap pages and preserve state across navigations. Share UI like headers, sidebars, and footers without re-rendering.
Stream parts of the UI progressively as data becomes available, keeping the experience responsive even for slow data sources.
Mutate data directly from components using async server functions. No separate API route needed for form submissions.
Fetch data, run server logic, and render UI all within a single Next.js application without managing a separate backend.
## How the App Router works
The `app` directory contains your application's routes. Each folder in `app` maps to a URL segment. Special files like `page.tsx` and `layout.tsx` define what is rendered at each segment.
```
app/
├── layout.tsx # Root layout (required)
├── page.tsx # Home page: /
├── blog/
│ ├── layout.tsx # Blog layout: wraps /blog and /blog/[slug]
│ ├── page.tsx # Blog index: /blog
│ └── [slug]/
│ └── page.tsx # Blog post: /blog/my-post
└── dashboard/
└── page.tsx # Dashboard: /dashboard
```
By default, all components inside `app` are **React Server Components**. You opt into client-side interactivity with the `'use client'` directive.
## Getting started
Work through the guides in order to build a complete understanding of the App Router:
Create a new Next.js app and set up TypeScript, ESLint, and path aliases.
Learn the folder and file conventions used across a Next.js project.
Create pages and shared layouts with file-system routing.
Use the Link component, prefetching, and streaming for fast navigations.
Understand when to run code on the server vs. the client.
Fetch data in Server Components, stream loading states, and handle errors.
Use Server Actions to handle form submissions and data mutations.
Deploy to Vercel, self-host with Node.js or Docker, or export as static files.