Installation
System Requirements:
- Node.js 16.8 or later.
- macOS, Windows (including WSL), and Linux are supported.
Automatic Installation
We recommend creating a new Next.js app using create-next-app
, which sets up everything automatically for you. To create a project, run:
npx create-next-app@latest
On installation, you'll see the following prompts:
What is your project named? my-app
Would you like to use TypeScript with this project? No / Yes
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to use `src/` directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customize the default import alias? No / Yes
Next.js now ships with TypeScript, ESLint, and Tailwind CSS configuration by default. You can also choose to use the src
directory for your application code.
After the prompts, create-next-app
will create a folder with your project name and install the required dependencies.
Note: While you can use the Pages Router in your new project. We recommend starting new applications with the App Router to leverage React's latest features.
Manual Installation
To manually create a new Next.js app, install the required packages:
npm install next@latest react@latest react-dom@latest
Open package.json
and add the following scripts
:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
These scripts refer to the different stages of developing an application:
dev
: runsnext dev
to start Next.js in development mode.build
: runsnext build
to build the application for production usage.start
: runsnext start
to start a Next.js production server.lint
: runsnext lint
to set up Next.js' built-in ESLint configuration.
Create the app
folder
Next, create an app
folder and add a layout.tsx
and page.tsx
file. These will be rendered when the user visits the root of your application.


Create a root layout inside app/layout.tsx
with the required <html>
and <body>
tags:
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Finally, create a home page app/page.tsx
with some initial content:
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
Good to know: If you forget to create
layout.tsx
, Next.js will automatically create this file for you when running the development server withnext dev
.
Create the public
folder
You can optionally create a public
folder to store static assets such as images, fonts, etc. Files inside public
directory can then be referenced by your code starting from the base URL (/
).
Run the Development Server
- Run
npm run dev
to start the development server. - Visit
http://localhost:3000
to view your application. - Edit
app/layout.tsx
orapp/page.tsx
and save to see the updated result in your browser.