b7ea0a5abe
Following up https://github.com/vercel/next.js/pull/42012 this adds an additional prompt for include ESLint config/dependencies or not. As discussed, this also removes the slow down from doing separate `dependencies` and `devDependencies` installs since this separation is no longer required now that we have `output: 'standalone'` which ensures only actual necessary dependency files are used for production builds. <details> <summary>Before</summary> https://user-images.githubusercontent.com/22380829/198953290-116b422d-4359-4aa9-9d82-b3265fde7b3f.mp4 </details> <details> <summary>After</summary> https://user-images.githubusercontent.com/22380829/198953347-20dbf897-92b3-45ea-a9d2-cfb61622251d.mp4 </details> ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
115 lines
3.6 KiB
Markdown
115 lines
3.6 KiB
Markdown
---
|
|
description: Create Next.js apps in one command with create-next-app.
|
|
---
|
|
|
|
# Create Next App
|
|
|
|
The easiest way to get started with Next.js is by using `create-next-app`. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples). To get started, use the following command:
|
|
|
|
### Interactive
|
|
|
|
You can create a new project interactively by running:
|
|
|
|
```bash
|
|
npx create-next-app@latest
|
|
# or
|
|
yarn create next-app
|
|
# or
|
|
pnpm create next-app
|
|
```
|
|
|
|
You will be asked for the name of your project, and then whether you want to
|
|
create a TypeScript project:
|
|
|
|
```bash
|
|
✔ Would you like to use TypeScript with this project? … No / Yes
|
|
```
|
|
|
|
Select **Yes** to install the necessary types/dependencies and create a new TS project.
|
|
|
|
### Non-interactive
|
|
|
|
You can also pass command line arguments to set up a new project
|
|
non-interactively. See `create-next-app --help`:
|
|
|
|
```bash
|
|
create-next-app <project-directory> [options]
|
|
|
|
Options:
|
|
-V, --version output the version number
|
|
--ts, --typescript
|
|
|
|
Initialize as a TypeScript project. (default)
|
|
|
|
--js, --javascript
|
|
|
|
Initialize as a JavaScript project.
|
|
|
|
--eslint
|
|
|
|
Initialize with eslint config.
|
|
|
|
--no-eslint
|
|
|
|
Initialize without eslint config.
|
|
|
|
--experimental-app
|
|
|
|
Initialize as a `app/` directory project.
|
|
|
|
--use-npm
|
|
|
|
Explicitly tell the CLI to bootstrap the app using npm
|
|
|
|
--use-pnpm
|
|
|
|
Explicitly tell the CLI to bootstrap the app using pnpm
|
|
|
|
-e, --example [name]|[github-url]
|
|
|
|
An example to bootstrap the app with. You can use an example name
|
|
from the official Next.js repo or a GitHub URL. The URL can use
|
|
any branch and/or subdirectory
|
|
|
|
--example-path <path-to-example>
|
|
|
|
In a rare case, your GitHub URL might contain a branch name with
|
|
a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).
|
|
In this case, you must specify the path to the example separately:
|
|
--example-path foo/bar
|
|
```
|
|
|
|
### Why use Create Next App?
|
|
|
|
`create-next-app` allows you to create a new Next.js app within seconds. It is officially maintained by the creators of Next.js, and includes a number of benefits:
|
|
|
|
- **Interactive Experience**: Running `npx create-next-app@latest` (with no arguments) launches an interactive experience that guides you through setting up a project.
|
|
- **Zero Dependencies**: Initializing a project is as quick as one second. Create Next App has zero dependencies.
|
|
- **Offline Support**: Create Next App will automatically detect if you're offline and bootstrap your project using your local package cache.
|
|
- **Support for Examples**: Create Next App can bootstrap your application using an example from the Next.js examples collection (e.g. `npx create-next-app --example api-routes`).
|
|
- **Tested**: The package is part of the Next.js monorepo and tested using the same integration test suite as Next.js itself, ensuring it works as expected with every release.
|
|
|
|
## 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>
|