Scribd
Upload
5 views12 pages

Getting Started - Installation - Next - Js

Uploaded by

mehedi.sohag
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views12 pages

Getting Started - Installation - Next - Js

Uploaded by

mehedi.sohag
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

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.

You might also like