2019-12-23 16:07:38 +01:00
---
2020-01-03 19:16:51 +01:00
description: Get started with Next.js in the official documentation, and learn more about all our features!
2019-12-23 16:07:38 +01:00
---
# Getting Started
Welcome to the Next.js documentation!
2021-06-15 02:49:35 +02:00
If you're new to Next.js we recommend that you start with the [learn course ](https://nextjs.org/learn/basics/create-nextjs-app ).
2019-12-23 16:07:38 +01:00
The interactive course with quizzes will guide you through everything you need to know to use Next.js.
2020-05-27 23:51:11 +02:00
If you have questions about anything related to Next.js, you're always welcome to ask our community on [GitHub Discussions ](https://github.com/vercel/next.js/discussions ).
2020-03-25 16:06:58 +01:00
2019-12-23 16:07:38 +01:00
#### System Requirements
2020-04-02 20:06:36 +02:00
- [Node.js 10.13 ](https://nodejs.org/ ) or later
2019-12-23 16:07:38 +01:00
- MacOS, Windows (including WSL), and Linux are supported
## Setup
2020-02-12 21:19:58 +01:00
We recommend creating a new Next.js app using `create-next-app` , which sets up everything automatically for you. To create a project, run:
```bash
2020-05-22 04:40:06 +02:00
npx create-next-app
2020-02-12 21:19:58 +01:00
# or
yarn create next-app
```
2021-05-07 10:08:16 +02:00
If you want to start with a TypeScript project you can use the `--typescript` flag:
```bash
npx create-next-app --typescript
# or
yarn create next-app --typescript
```
2020-02-12 21:19:58 +01:00
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.
2020-08-11 12:08:43 +02:00
For more information on how to use `create-next-app` , you can review the [`create-next-app` documentation ](/docs/api-reference/create-next-app.md )
2020-08-03 15:43:16 +02:00
2020-02-12 21:19:58 +01:00
## Manual Setup
2019-12-23 16:07:38 +01:00
Install `next` , `react` and `react-dom` in your project:
```bash
2020-01-27 14:35:12 +01:00
npm install next react react-dom
2020-08-28 04:27:34 +02:00
# or
yarn add next react react-dom
2019-12-23 16:07:38 +01:00
```
2020-01-07 20:37:19 +01:00
Open `package.json` and add the following `scripts` :
2019-12-23 16:07:38 +01:00
```json
"scripts": {
2020-07-30 20:44:44 +02:00
"dev": "next dev",
2019-12-23 16:07:38 +01:00
"build": "next build",
2021-06-03 14:01:24 +02:00
"start": "next start",
"lint": "next lint"
2019-12-23 16:07:38 +01:00
}
```
These scripts refer to the different stages of developing an application:
2020-08-25 06:31:48 +02:00
- `dev` - Runs [`next dev` ](/docs/api-reference/cli.md#development ) which starts Next.js in development mode
- `build` - Runs [`next build` ](/docs/api-reference/cli.md#build ) which builds the application for production usage
- `start` - Runs [`next start` ](/docs/api-reference/cli.md#production ) which starts a Next.js production server
2021-06-03 14:01:24 +02:00
- `lint` - Runs [`next lint` ](/docs/api-reference/cli.md#lint ) which sets up Next.js' built-in ESLint configuration
2019-12-23 16:07:38 +01:00
2020-07-30 20:44:44 +02:00
Next.js is built around the concept of [pages ](/docs/basic-features/pages.md ). A page is a [React Component ](https://reactjs.org/docs/components-and-props.html ) exported from a `.js` , `.jsx` , `.ts` , or `.tsx` file in the `pages` directory.
2019-12-23 16:07:38 +01:00
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:
```jsx
function HomePage() {
return < div > Welcome to Next.js!< / div >
}
export default HomePage
```
2020-08-28 04:27:34 +02:00
To start developing your application run `npm run dev` or `yarn dev` . This starts the development server on `http://localhost:3000` .
2019-12-23 16:07:38 +01:00
Visit `http://localhost:3000` to view your application.
So far, we get:
- Automatic compilation and bundling (with webpack and babel)
2020-05-22 04:40:06 +02:00
- [React Fast Refresh ](https://nextjs.org/blog/next-9-4#fast-refresh )
- [Static generation and server-side rendering ](/docs/basic-features/data-fetching.md ) of [`./pages/` ](/docs/basic-features/pages.md )
2019-12-23 16:07:38 +01:00
- [Static file serving ](/docs/basic-features/static-file-serving.md ). `./public/` is mapped to `/`
2020-05-22 04:40:06 +02:00
In addition, any Next.js application is ready for production from the start, read more in our [Deployment documentation ](/docs/deployment.md ).
2019-12-23 16:07:38 +01:00
## Related
For more information on what to do next, we recommend the following sections:
< div class = "card" >
< a href = "/docs/basic-features/pages.md" >
< b > Pages:< / b >
2020-01-20 21:40:20 +01:00
< small > Learn more about what pages are in Next.js.< / small >
2019-12-23 16:07:38 +01:00
< / a >
< / div >
< div class = "card" >
< a href = "/docs/basic-features/built-in-css-support.md" >
< b > CSS Support:< / b >
2020-01-20 21:40:20 +01:00
< small > Use the built-in CSS support to add custom styles to your app.< / small >
2019-12-23 16:07:38 +01:00
< / a >
< / div >
2020-04-24 23:29:26 +02:00
< div class = "card" >
< a href = "/docs/api-reference/cli.md" >
< b > CLI:< / b >
< small > Learn more about the Next.js CLI.< / small >
< / a >
< / div >