c5eb535229
* Expand on the docs for the serverless target * Added catch all routes to API docs * Added caveat for catch all routes * Added link to Rauch's post about serverless * Add mention of `lang` * Add create-next-app to docs * Updated dynamic import examples to be more descriptive * Even better * Clarify valid catch all routes * Removed unexpected word * Apply suggestions from Joe Co-Authored-By: Joe Haddad <joe.haddad@zeit.co> * Keep #setup Co-Authored-By: Joe Haddad <joe.haddad@zeit.co> * Updated docs for the serverless target * Apply suggestions from code review Co-Authored-By: Shu Uesugi <shu@chibicode.com> * Update docs/getting-started.md Co-Authored-By: Shu Uesugi <shu@chibicode.com> * Added suggestion from chibicode Co-authored-by: Joe Haddad <timer150@gmail.com> Co-authored-by: Shu Uesugi <shu@chibicode.com>
97 lines
2.9 KiB
Markdown
97 lines
2.9 KiB
Markdown
---
|
|
description: Get started with Next.js in the official documentation, and learn more about all our features!
|
|
---
|
|
|
|
# Getting Started
|
|
|
|
Welcome to the Next.js documentation!
|
|
|
|
If you're new to Next.js we recommend that you start with the [learn course](https://nextjs.org/learn/basics/getting-started).
|
|
|
|
The interactive course with quizzes will guide you through everything you need to know to use Next.js.
|
|
|
|
#### System Requirements
|
|
|
|
- [Node.js 10](https://nodejs.org/) or later
|
|
- MacOS, Windows (including WSL), and Linux are supported
|
|
|
|
## 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:
|
|
|
|
```bash
|
|
npm init next-app
|
|
# or
|
|
yarn create next-app
|
|
```
|
|
|
|
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.
|
|
|
|
## Manual Setup
|
|
|
|
Install `next`, `react` and `react-dom` in your project:
|
|
|
|
```bash
|
|
npm install next react react-dom
|
|
```
|
|
|
|
Open `package.json` and add the following `scripts`:
|
|
|
|
```json
|
|
"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](https://reactjs.org/docs/components-and-props.html) 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:
|
|
|
|
```jsx
|
|
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/`](/docs/basic-features/pages.md)
|
|
- [Static file serving](/docs/basic-features/static-file-serving.md). `./public/` is mapped to `/`
|
|
|
|
## 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>
|
|
<small>Learn more about what pages are in Next.js.</small>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<a href="/docs/basic-features/built-in-css-support.md">
|
|
<b>CSS Support:</b>
|
|
<small>Use the built-in CSS support to add custom styles to your app.</small>
|
|
</a>
|
|
</div>
|