NextJS

Next.js: a React framework with good defaults

Why Next.js is worth using

Next.js is a React framework that is flexible but ships with good defaults, so you can start any React project quickly without wiring up a bundler, router, and server yourself.

Routing from your folders. Create a folder in app/ with a page.tsx inside and you have a new route. No router config needed.
Render however each page needs. Pages can be static, rendered on the server per request, or streamed in, and you can mix these in one app. React Server Components are the default, so less JavaScript is sent to the browser.
Fast dev server. Turbopack is the default bundler, so the dev server starts quickly and changes show up almost instantly.
Frontend and backend in one project. Route handlers (route.ts) and Server Actions let you write API endpoints and form handling next to your pages.
Batteries included. TypeScript, Tailwind CSS, image optimization (next/image), font loading, and metadata/SEO helpers all work out of the box.
Deploy almost anywhere. Run it as a Node.js server, in a Docker container, on Vercel, or export it as a plain static site.

Installing Next.js

You need Node.js 20.9 or newer. Check your version with:

node -v

Then create a new app. The --yes flag accepts the recommended defaults: TypeScript, Tailwind CSS, ESLint, App Router, Turbopack, and the @/* import alias.

npm: npx create-next-app@latest my-app --yes
pnpm: pnpm create next-app@latest my-app --yes
yarn: yarn create next-app@latest my-app --yes
bun: bun create next-app@latest my-app --yes

Leave off --yes if you want to answer the prompts yourself. You can pick Biome instead of ESLint, turn on the React Compiler, or put your code in a src/ folder.

Setting up a new app

npx create-next-app@latest my-app --yes – create the project
cd my-app
npm run dev – start the dev server
Open http://localhost:3000
Edit app/page.tsx and save. The browser updates right away.

Project layout at a glance

app/ – your routes. Each folder is a URL segment and each page.tsx is a page
app/layout.tsx – the root layout, which wraps every page (it holds the <html> and <body> tags)
app/api/.../route.ts – API endpoints (optional)
public/ – static files served from / (images, favicons, etc.)
next.config.ts – Next.js config
tsconfig.json – TypeScript config, including the @/* import alias

Adding a page

Create app/about/page.tsx:

export default function Page() {
  return <h1>About me</h1>
}

Visit http://localhost:3000/about and it’s there.

Run the Next.js server for dev

npm run dev (runs next dev)

Useful flags:

next dev -p 4000 – use a different port
next dev -H 0.0.0.0 – make the server reachable from other devices on your network
next dev --webpack – use Webpack instead of Turbopack if a plugin needs it

Build and run for production

npm run build – production build (next build)
npm run start – start the production server (next start) on port 3000

Exporting a static site

Next.js wasn’t created just for static sites, but it’s easy to set one up. Add output: 'export' to next.config.ts:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  output: 'export',
}

export default nextConfig

Run npm run build and the finished site is written to the out/ folder. Upload that folder to any static host. Features that need a server, such as request-time rendering and Server Actions, won’t work in a static export.

note

next build no longer runs the linter (since Next.js 16). Run npm run lint yourself or in CI
Keep up to date with npx next upgrade
Old tutorials that use a pages/ folder are for the Pages Router. New projects should use the app/ folder (App Router)