Getting Started

If you’re new to Next.js, we recommend starting with the .

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

  • or later
  • MacOS, Windows (including WSL), and Linux are supported

We recommend creating a new Next.js app using , which sets up everything automatically for you. To create a project, run:

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

After the installation is complete:

  • Visit http://localhost:3000 to view your application
  • Edit pages/index.js and see the updated result in your browser

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

Open package.json and add the following scripts:

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

  • - Runs next dev to start Next.js in development mode
  • build - Runs to build the application for production usage
  • start - Runs next start to start a Next.js production server
  • lint - Runs to set up Next.js’ built-in ESLint configuration

Create two directories pages and public at the root of your application:

  • public - Stores static assets such as images, fonts, etc. Files inside public directory can then be referenced by your code starting from the base URL (/).

Next.js is built around the concept of pages. A page is a exported from a .js, .jsx, , or .tsx file in the pages directory. You can even add dynamic route parameters with the filename.

Inside the pages directory add the index.js file to get started. This is the page that is rendered when the user visits the root of your application.

After the set up is complete:

  • Run npm run dev or yarn dev or pnpm 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

So far, we get:

  • Automatic compilation and
  • React Fast Refresh
  • through public/ which is mapped to the base URL (/)

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:

PagesLearn more about what pages are in Next.js.