e89bcf7e39
Following up from #14830, this PR adds a new page to the docs for Create Next App. The content is identical to the README created as part of #14830. Also added a link on the main `getting-started` page to the new docs for Create Next App to help users find more info on Create Next App if needed. I'm unsure as to whether the content for the documentation needs to be different from the one I wrote for the README. Please let me know if that's the case, and I will be happy to tweak the structure.
110 lines
3.7 KiB
Markdown
110 lines
3.7 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.
|
|
|
|
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).
|
|
|
|
#### System Requirements
|
|
|
|
- [Node.js 10.13](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
|
|
npx create-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.
|
|
|
|
For more information on how to use `create-next-app`, you can review the [`create-next-app` documentation](/docs/create-next-app.md)
|
|
|
|
## 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 dev",
|
|
"build": "next build",
|
|
"start": "next start"
|
|
}
|
|
```
|
|
|
|
These scripts refer to the different stages of developing an application:
|
|
|
|
- `dev` - Runs [`next dev`](/docs/api-reference/cli#development) which starts Next.js in development mode
|
|
- `build` - Runs [`next build`](/docs/api-reference/cli#build) which builds the application for production usage
|
|
- `start` - Runs [`next start`](/docs/api-reference/cli#production) which starts a Next.js production server
|
|
|
|
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.
|
|
|
|
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)
|
|
- [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)
|
|
- [Static file serving](/docs/basic-features/static-file-serving.md). `./public/` is mapped to `/`
|
|
|
|
In addition, any Next.js application is ready for production from the start, read more in our [Deployment documentation](/docs/deployment.md).
|
|
|
|
## 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>
|
|
|
|
<div class="card">
|
|
<a href="/docs/api-reference/cli.md">
|
|
<b>CLI:</b>
|
|
<small>Learn more about the Next.js CLI.</small>
|
|
</a>
|
|
</div>
|