cf3d73a46b
### Why? Whenever I run `create-next-app` and reach this question ``` Would you like to customize the default import alias? No / Yes ``` I always have to select "No", because I don't remember what this default import alias here is. [It _is_ documented to be `@/*`](https://nextjs.org/docs/app/api-reference/create-next-app#non-interactive), but the documentation is relatively hidden and not many people know about it – it's also easy to forget. Even more confusingly, the next question ("What import alias would you like configured?") doesn't have this `@/*` as the default answer, but the user's last choice as the default answer instead (which could be different from `@/*` – making people wonder if Next.js changed their defaults overnight). I suppose it would be better to just make it clear in the prompt itself, so people with skill issues who happen to forget that default value (like me) can still confidently select "Yes" if they want `@/*`, without having to do "No" and manually type `@/*` again. ### How ```diff - Would you like to customize the default import alias? + Would you like to customize the default import alias (@/*)? ```
131 lines
4.2 KiB
Text
131 lines
4.2 KiB
Text
---
|
|
title: create-next-app
|
|
description: Create Next.js apps in one command with create-next-app.
|
|
---
|
|
|
|
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
|
|
|
|
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).
|
|
|
|
### Interactive
|
|
|
|
You can create a new project interactively by running:
|
|
|
|
```bash filename="Terminal"
|
|
npx create-next-app@latest
|
|
```
|
|
|
|
```bash filename="Terminal"
|
|
yarn create next-app
|
|
```
|
|
|
|
```bash filename="Terminal"
|
|
pnpm create next-app
|
|
```
|
|
|
|
```bash filename="Terminal"
|
|
bunx create-next-app
|
|
```
|
|
|
|
You will then be asked the following prompts:
|
|
|
|
```txt filename="Terminal"
|
|
What is your project named? my-app
|
|
Would you like to use TypeScript? No / Yes
|
|
Would you like to use ESLint? No / Yes
|
|
Would you like to use Tailwind CSS? No / Yes
|
|
Would you like to use `src/` directory? No / Yes
|
|
Would you like to use App Router? (recommended) No / Yes
|
|
Would you like to customize the default import alias (@/*)? No / Yes
|
|
```
|
|
|
|
Once you've answered the prompts, a new project will be created with the correct configuration depending on your answers.
|
|
|
|
### Non-interactive
|
|
|
|
You can also pass command line arguments to set up a new project non-interactively.
|
|
|
|
Further, you can negate default options by prefixing them with `--no-` (e.g. `--no-eslint`).
|
|
|
|
See `create-next-app --help`:
|
|
|
|
```bash filename="Terminal"
|
|
Usage: 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.
|
|
|
|
--tailwind
|
|
|
|
Initialize with Tailwind CSS config. (default)
|
|
|
|
--eslint
|
|
|
|
Initialize with ESLint config.
|
|
|
|
--app
|
|
|
|
Initialize as an App Router project.
|
|
|
|
--src-dir
|
|
|
|
Initialize inside a `src/` directory.
|
|
|
|
--import-alias <alias-to-configure>
|
|
|
|
Specify import alias to use (default "@/*").
|
|
|
|
--use-npm
|
|
|
|
Explicitly tell the CLI to bootstrap the app using npm
|
|
|
|
--use-pnpm
|
|
|
|
Explicitly tell the CLI to bootstrap the app using pnpm
|
|
|
|
--use-yarn
|
|
|
|
Explicitly tell the CLI to bootstrap the app using Yarn
|
|
|
|
--use-bun
|
|
|
|
Explicitly tell the CLI to bootstrap the app using Bun
|
|
|
|
-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 public 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
|
|
|
|
--reset-preferences
|
|
|
|
Explicitly tell the CLI to reset any stored preferences
|
|
|
|
-h, --help output usage information
|
|
```
|
|
|
|
### 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`) or any public GitHub repository.
|
|
- **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.
|