Framework · Since 2016

Next.js

Next.js is a React framework for websites and full-stack web apps, with file-based routing, server rendering, Server Components and built-in optimizations.

Start the guide Discussions

Next.js is an open-source React framework created by Vercel and first released in 2016. It bundles what React alone leaves you to assemble yourself: routing, server rendering, static generation, data fetching and build tooling. The recommended App Router is built on React Server Components; the folder structure of the app directory defines your URLs, and server and client code live side by side in one project.

Next.js shines where both performance and search visibility matter, and it is widely used for marketing sites, blogs and documentation, online stores and SaaS dashboards. Each route can be prerendered at build time or rendered per request, and slow parts can be streamed in progressively. Server Actions and Route Handlers take care of forms and APIs, so one codebase covers the UI and the backend that serves it, and image, font and script optimization come built in.

To get started, install Node.js, create a project with create-next-app, then work through the official Getting Started docs and the free Learn Next.js course. Knowing React components, props and hooks makes everything easier, so if React is new to you, learn its basics first. TypeScript works out of the box and is recommended for new projects.

Highlights

File-system routing

Folders and special files such as page, layout, loading and error in the app directory define URLs, nested layouts, loading states and error UI.

Server and Client Components

Components render on the server by default and send no JavaScript to the browser; only parts marked with "use client" run in the browser.

Flexible rendering

Mix static generation, request-time rendering and streaming per route, and keep content fresh with caching and revalidation.

Built-in optimizations

Image, font and script components, automatic code splitting, link prefetching and Turbopack deliver fast builds and quick refreshes.

Where it is used

Marketing sites, blogs and documentation
E-commerce storefronts
SaaS dashboards and web applications
Full-stack apps with APIs and Server Actions

Install

1
Install Node.js
Install an LTS release of Node.js from nodejs.org and check the version in a terminal. npm comes with it; pnpm, Yarn or Bun work too.
```
node --version
```
2
Create a project
Scaffold a new project with create-next-app. The recommended defaults set up TypeScript, ESLint, Tailwind CSS and the App Router.
```
npx create-next-app@latest my-app
```
3
Start the dev server
Move into the project folder, start the development server and open http://localhost:3000. The page updates as soon as you save a file.
```
cd my-app && npm run dev
```

Your first program

Your first page

In the App Router, app/page.tsx is the home page at /. The React component it exports by default becomes the page; here it is a Server Component that returns a heading. Saving the file refreshes the browser instantly, and adding app/about/page.tsx creates a new /about page.

app/page.tsx

export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

npx create-next-app@latest my-app && cd my-app && npm run dev

Everyday tools

create-next-app: The official CLI that scaffolds a new project with TypeScript, linting, Tailwind CSS and the App Router configured.
Turbopack: An incremental bundler written in Rust and the default bundler in recent releases, giving the dev server fast startup and refreshes.
ESLint: The JavaScript linter. The ESLint config provided by Next.js catches common Next.js and React mistakes.
React Developer Tools: A browser extension for inspecting the component tree and the props and state of Client Components.

Step-by-step guide

Six chapters that take you from installation to the core ideas of Next.js.

Official docs and resources

Languages

Discussions

Start a discussion

Ask questions, share experience and trade opinions about Next.js.

No discussions yet. Start the first one.