Getting Started

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.

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

• Node.js 10.13 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:

After the installation is complete, follow the instructions to start the development server. Try editing pages/index.js and see the result on your browser.

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

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

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

• dev - Runs which starts Next.js in development mode
• start - Runs which starts a Next.js production server

Next.js is built around the concept of pages. A page is a 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 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:

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

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

• Automatic compilation and bundling (with webpack and babel)
• React Fast Refresh
• . ./public/ is mapped to

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:

Learn more about what pages are in Next.js.

CSS Support

Use the built-in CSS support to add custom styles to your app.