MENU

Next.js

Next.js is a React framework for production. As of Next.js 16, the App Router (the 'app' directory) is the default and recommended way to build a Next.js app — it renders React Server Components by default, supports nested layouts, and adds Server Actions for server-side data mutations. The older Pages Router (the 'pages' directory) still works and remains documented, but Next.js's own docs now refer to it as legacy. This tutorial introduces Next.js with the App Router. Its features include:

Image Optimization

<Image> and Automatic Image Optimization with instant builds.

Internationalization

Built-in Domain & Subdomain Routing and Automatic Language detection.

Next.js Analytics

A true lighthouse score based on real visitor data & page-by-page insights.

Zero Config

Automatic compilation and bundling. Optimized for production from the start.

Hybrid SSG and SSR

Pre-render pages at build time (SSG) or request time (SSR) in a single project.

Incremental Static Regeneration

Add and update statically pre-rendered pages incrementally after build time.

TypeScript Support

Automatic TypeScript configuration and compilation.

Fast Refresh

Fast, reliable live-editing experience, as proven at Facebook scale.

Optimized Prefetching

Client-side routing with optimized prefetching.

File-system Routing

Every folder with a 'page.js' file inside the 'app' directory becomes a route. (The legacy Pages Router instead treats every component file directly inside 'pages' as a route.)

Server Components by Default

Components inside 'app' are React Server Components unless marked otherwise: they render on the server, can be 'async', and ship no JavaScript to the browser. Add a 'use client' directive at the top of a file to opt that component into the client bundle when you need hooks like useState, event handlers, or browser-only APIs.

Nested Layouts

A 'layout.js' file wraps every route inside its folder (and any nested subfolders) with shared UI, such as a navigation bar, without re-rendering that UI on every navigation.

Server Actions

Async functions marked with the 'use server' directive run only on the server and can be called directly from Client Components — for example to handle a form submission — without you having to hand-build an API route.

API Routes

Optionally create API endpoints to provide backend functionality.

Built-in CSS Support

Create component-level styles with CSS modules. Built-in Sass support.

Code-splitting and Bundling

Optimized bundle splitting algorithm created by the Google Chrome team.

To create a Next.js App:

The CLI walks you through a few prompts (TypeScript, ESLint, Tailwind CSS, whether to use a 'src/' directory, and an import alias) and defaults to the App Router with Turbopack as the bundler.

To launch the development server on port 3000: