App Router
Copy page
Getting Started Installat…
Installation
Create a new [Link] app and run it locally.
Using App Router
Features available in /app Quick start
Latest Version 1. Create a new [Link] app named my-app
16.0.3
2. cd my-app and start the dev server.
3. Visit .
Getting Started [Link]
Installation
pnpm npm yarn bun
Project Structure
Terminal
Layouts and Pages
Linking and Navigating pnpm create next-app@latest my-app --yes
cd my-app
Server and Client Components
pnpm dev
Cache Components
Fetching Data
- --yes skips prompts using saved
Updating Data
preferences or defaults. The default setup
Caching and Revalidating
This site uses tracking technologies. You may opt in or enables
opt TypeScript, Tailwind, ESLint, App
out of Handling
Error the use of these technologies. Router, and Turbopack, with import alias
CSS @/* .
Deny Accept all Consent Settings
Image Optimization
Font Optimization
Metadata and OG images
System requirements
Route Handlers
Proxy Before you begin, make sure your
development environment meets the
Deploying
following requirements:
Upgrading
- Minimum [Link] version: 20.9
Guides
- Operating systems: macOS, Windows
API Reference
(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
This site uses tracking technologies. You may opt in or opt
out of the use of these technologies. 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:
Terminal
npx create-next-app@latest
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
This site uses tracking technologies. You may opt in or opt
out of the use of these technologies. 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. The
Pages Router uses the React version you install
in [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"
}
}
This site uses tracking technologies. You may opt in or opt
out of the use of these technologies. 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>
This site uses tracking technologies. You may opt in or opt
)
out of the use of these technologies. }
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
This site uses tracking technologies. You may opt inbase
or optURL ( / ).
out of the use of these technologies.
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
This site uses tracking technologies. You may opt [Link]
or opt comes with built-in TypeScript
out of the use of these technologies. 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
This site uses tracking technologies. You may opt [Link]
or opt supports linting with either ESLint or
out of the use of these technologies. 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 .
This site uses tracking technologies. You may opt inSee the ESLint API reference for a
or opt
out of the use of these technologies. 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:
This site uses tracking technologies. You may opt in or opt
out of the use of these technologies. [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?
This site uses tracking technologies. You may opt in or opt
out of the use of these technologies.
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
© 2025 Vercel, Inc.
This site uses tracking technologies. You may opt in or opt
out of the use of these technologies.