rsnext/packages/create-next-app
Balázs Orbán 486040eff2
chore: clarify CLI network errors (#36567)
Makes it easier to detect why a network error occurred with the CLI or `next info`, based on https://github.com/vercel/next.js/issues/36344

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
2022-04-29 12:39:17 +00:00
..
helpers feat: support pnpm with create-next-app (#34947) 2022-03-04 00:49:24 +01:00
templates Simplify .env.local gitignores (#34471) 2022-02-18 15:26:17 -06:00
create-app.ts chore: clarify CLI network errors (#36567) 2022-04-29 12:39:17 +00:00
index.ts Fix create-next-app failing without yarn installed (#35608) 2022-03-26 08:29:52 +00:00
package.json v12.1.6-canary.14 2022-04-28 13:34:45 -05:00
README.md chore(create-next-app): fix pnpm create step (#36398) 2022-04-25 02:43:13 +00:00
tsconfig.json Update CNA build target in tsconfig (#25780) 2021-06-08 09:32:29 +02:00

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. To get started, use the following command:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

Or, for a TypeScript project:

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --typescript

To create a new app in a specific folder, you can send a name as an argument. For example, the following command will create a new Next.js app called blog-app in a folder with the same name:

npx create-next-app@latest blog-app
# or
yarn create next-app blog-app
# or
pnpm create next-app blog-app

Options

create-next-app comes with the following options:

  • --ts, --typescript - Initialize as a TypeScript project.
  • -e, --example [name]|[github-url] - An example to bootstrap the app with. You can use an example name from the 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
  • --use-npm - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend to run yarn create next-app
  • --use-pnpm - Explicitly tell the CLI to bootstrap the app using pnpm. To bootstrap using pnpm we recommend running pnpm create next-app

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 (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.