Skip to main content

Getting Started

Welcome to the Next.js documentation!

If you're new to Next.js, we recommend starting with the learn course.

The interactive course with quizzes will guide you through everything you need to know to use Next.js.

If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions.

System Requirements​

  • Node.js 12.22.0 or later
  • MacOS, Windows (including WSL), and Linux are supported

Automatic Setup​

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
# or
yarn create next-app

If you want to start with a TypeScript project you can use the --typescript flag:

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

After the installation is complete:

  • Run npm run dev or yarn dev to start the development server on http://localhost:3000
  • Visit http://localhost:3000 to view your application
  • Edit pages/index.js and see the updated result in your browser

For more information on how to use create-next-app, you can review the create-next-app documentation.

Manual Setup​

Install next, react and react-dom in your project:

npm install next react react-dom
# or
yarn add next react react-dom

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 - Runs next dev which starts Next.js in development mode
  • build - Runs next build which builds the application for production usage
  • start - Runs next start which starts a Next.js production server
  • lint - Runs next lint which sets up Next.js' built-in ESLint configuration

Next.js is built around the concept of pages. A page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory.

Pages are associated with a route based on their file name. For example pages/about.js is mapped to /about. You can even add dynamic route parameters with the filename.

Create a pages directory inside your project.

Populate ./pages/index.js with the following contents:

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

So far, we get:

In addition, any Next.js application is ready for production from the start. Read more in our Deployment documentation.

For more information on what to do next, we recommend the following sections:

Pages:Learn more about what pages are in Next.js.
CSS Support:Built-in CSS support to add custom styles to your app.
CLI:Learn more about the Next.js CLI.