Skip to main content
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?

Server Components by default

Pages and layouts render on the server, reducing the JavaScript sent to the browser and improving initial load performance.

File-system routing

Routes are defined by the folder structure inside the app directory. No configuration needed.

Nested layouts

Layouts wrap pages and preserve state across navigations. Share UI like headers, sidebars, and footers without re-rendering.

Streaming and Suspense

Stream parts of the UI progressively as data becomes available, keeping the experience responsive even for slow data sources.

Server Actions

Mutate data directly from components using async server functions. No separate API route needed for form submissions.

Full-stack in one project

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:

Installation

Create a new Next.js app and set up TypeScript, ESLint, and path aliases.

Project structure

Learn the folder and file conventions used across a Next.js project.

Layouts and pages

Create pages and shared layouts with file-system routing.

Linking and navigating

Use the Link component, prefetching, and streaming for fast navigations.

Server and Client Components

Understand when to run code on the server vs. the client.

Fetching data

Fetch data in Server Components, stream loading states, and handle errors.

Mutating data

Use Server Actions to handle form submissions and data mutations.

Deploying

Deploy to Vercel, self-host with Node.js or Docker, or export as static files.

Build docs developers (and LLMs) love

Get started for freeTalk to us