Note: You are viewing the new Next.js documentation. The old docs are still available here.

Getting Started

Welcome to the Next.js documentation!

If you're new to Next.js we recommend that you start with the learn course.

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

System Requirements permalink

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

Setup permalink

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

npm install --save next react react-dom

Open package.json and add the following scripts:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

These scripts refer to the different stages of developing an application:

  • dev - Runs next 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

Next.js is built around the concept of pages. A page is a React Component exported from a .js, .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

To start developing your application run npm run dev. This starts the development server on http://localhost:3000.

Visit http://localhost:3000 to view your application.

So far, we get:

  • Automatic compilation and bundling (with webpack and babel)
  • Hot code reloading
  • Static generation and server-side rendering of ./pages/
  • Static file serving. ./public/ is mapped to /

Related permalink

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