Using App Router
Features available in /app App Router
Copy page
Getting Started Installat…
Latest Version
16.1.6
Getting Started Installation
Installation Last updated February 27, 2026
Project Structure
Create a new [Link] app and run it locally.
Layouts and Pages
Linking and Navigating
Server and Client Components
Cache Components Quick start
Fetching Data
1. Create a new [Link] app named my-app
Updating Data
2. cd my-app and start the dev server.
Caching and Revalidating
3. Visit [Link] .
Error Handling
CSS pnpm npm yarn bun
Image Optimization Terminal
Font Optimization
pnpm create next-app@latest my-app --yes
Metadata and OG images
cd my-app
Route Handlers pnpm dev
Proxy
Deploying
- --yes skips prompts using saved
preferences or defaults. The default setup
Upgrading
enables TypeScript, Tailwind, ESLint, App
Guides Router, and Turbopack, with import alias
@/* .
API Reference
Directives
System requirements
Components
Before you begin, make sure your
development environment meets the
following requirements:
- Minimum [Link] version: 20.9
- Operating systems: macOS, Windows
(including WSL), and Linux.
Supported browsers
[Link] supports modern browsers with zero
configuration.
- Chrome 111+
- Edge 111+
- Firefox 111+
- Safari 16.4+
Learn more about browser support, including
how to configure polyfills and target specific
browsers.
Create with the CLI
The quickest way to create a new [Link] app
is using create-next-app , which sets up
everything automatically for you. To create a
project, run:
pnpm npm yarn bun
Terminal
pnpm create next-app
On installation, you'll see the following
prompts:
Terminal
What is your project named? my-app
Would you like to use the recommended Nex
Yes, use recommended defaults - TypeS
No, reuse previous settings
No, customize settings - Choose your
If you choose to customize settings , you'll
see the following prompts:
Terminal
Would you like to use TypeScript? No / Ye
Which linter would you like to use? ESLin
Would you like to use React Compiler? No
Would you like to use Tailwind CSS? No /
Would you like your code inside a `src/`
Would you like to use App Router? (recomm
Would you like to customize the import al
What import alias would you like configur
After the prompts, create-next-app will
create a folder with your project name and
install the required dependencies.
Manual installation
To manually create a new [Link] app, install
the required packages:
pnpm npm yarn bun
Terminal
pnpm i next@latest react@latest react-dom
Good to know:
- The App Router uses React canary releases
built-in, which include all the stable
React 19 changes, as well as newer features
being validated in frameworks, but you
should still declare react and react-dom in
[Link] for tooling and ecosystem
compatibility.
- The Pages Router uses the React version
from your [Link] .
Then, add the following scripts to your
[Link] file:
[Link]
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint",
"lint:fix": "eslint --fix"
}
}
These scripts refer to the different stages of
developing an application:
- next dev : Starts the development server
using Turbopack (default bundler).
- next build : Builds the application for
production.
- next start : Starts the production server.
- eslint : Runs ESLint.
Turbopack is now the default bundler. To use
Webpack run next dev --webpack or
next build --webpack . See the Turbopack
docs for configuration details.
Create the app directory
[Link] uses file-system routing, which means
the routes in your application are determined
by how you structure your files.
Create an app folder. Then, inside app ,
create a [Link] file. This file is the root
layout. It's required and must contain the
<html> and <body> tags.
app/[Link] TypeScript
export default function RootLayout({
children,
}: {
children: [Link]
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
Create a home page app/[Link] with
some initial content:
app/[Link] TypeScript
export default function Page() {
return <h1>Hello, [Link]!</h1>
}
Both [Link] and [Link] will be
rendered when the user visits the root of your
application ( / ).
Good to know:
- If you forget to create the root layout,
[Link] will automatically create this file
when running the development server with
next dev .
- You can optionally use a src folder in the
root of your project to separate your
application's code from configuration files.
Create the public folder (optional)
Create a public folder at the root of your
project to store static assets such as images,
fonts, etc. Files inside public can then be
referenced by your code starting from the
base URL ( / ).
You can then reference these assets using
the root path ( / ). For example,
public/[Link] can be referenced as
/[Link] :
app/[Link] TypeScript
import Image from 'next/image'
export default function Page() {
return <Image src="/[Link]" alt="P
}
Run the development server
1. Run npm run dev to start the
development server.
2. Visit [Link] to view
your application.
3. Edit the app/[Link] file and save it to
see the updated result in your browser.
Set up TypeScript
Minimum TypeScript version: v5.1.0
[Link] comes with built-in TypeScript
support. To add TypeScript to your project,
rename a file to .ts / .tsx and run
next dev . [Link] will automatically install
the necessary dependencies and add a
[Link] file with the recommended
config options.
IDE Plugin
[Link] includes a custom TypeScript plugin
and type checker, which VSCode and other
code editors can use for advanced type-
checking and auto-completion.
You can enable the plugin in VS Code by:
1. Opening the command palette ( Ctrl/⌘ +
Shift + P )
2. Searching for "TypeScript: Select
TypeScript Version"
3. Selecting "Use Workspace Version"
See the TypeScript reference page for more
information.
Set up linting
[Link] supports linting with either ESLint or
Biome. Choose a linter and run it directly via
[Link] scripts.
- Use ESLint (comprehensive rules):
[Link]
{
"scripts": {
"lint": "eslint",
"lint:fix": "eslint --fix"
}
}
- Or use Biome (fast linter + formatter):
[Link]
{
"scripts": {
"lint": "biome check",
"format": "biome format --write"
}
}
If your project previously used next lint ,
migrate your scripts to the ESLint CLI with
the codemod:
Terminal
npx @next/codemod@canary next-lint-to-esl
If you use ESLint, create an explicit config
(recommended [Link] ). ESLint
supports both the legacy .eslintrc.* and
the newer [Link] formats .
See the ESLint API reference for a
recommended setup.
Good to know: Starting with [Link] 16,
next build no longer runs the linter
automatically. Instead, you can run your linter
through NPM scripts.
See the ESLint Plugin page for more
information.
Set up Absolute Imports and
Module Path Aliases
[Link] has in-built support for the "paths"
and "baseUrl" options of [Link]
and [Link] files.
These options allow you to alias project
directories to absolute paths, making it easier
and cleaner to import modules. For example:
// Before
import { Button } from '../../../componen
// After
import { Button } from '@/components/butt
To configure absolute imports, add the
baseUrl configuration option to your
[Link] or [Link] file. For
example:
[Link] or [Link]
{
"compilerOptions": {
"baseUrl": "src/"
}
}
In addition to configuring the baseUrl path,
you can use the "paths" option to "alias"
module paths.
For example, the following configuration
maps @/components/* to components/* :
[Link] or [Link]
{
"compilerOptions": {
"baseUrl": "src/",
"paths": {
"@/styles/*": ["styles/*"],
"@/components/*": ["components/*"]
}
}
}
Each of the "paths" are relative to the
baseUrl location.
Previous Next
Getting Started Project Structure
Was this helpful?
Resources More About Vercel Legal
Docs [Link] Commerce [Link] + Vercel Privacy Policy
Support Policy Contact Sales Open Source Software Cookie Preferences
Learn Community GitHub
Showcase GitHub Bluesky
Blog Releases X
Team Telemetry
Analytics Governance
[Link] Conf
Previews
Evals
Subscribe to our newsletter
Stay updated on new releases and
features, guides, and case studies.
you@[Link] Subscribe
© 2026 Vercel, Inc.