| | --- |
| | title: create-next-app |
| | description: Create Next.js apps using one command with the create-next-app CLI. |
| | --- |
| |
|
| | {/* 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 `create-next-app` CLI allow you to create a new Next.js application using the default template or an [example](https://github.com/vercel/next.js/tree/canary/examples) from a public GitHub repository. It is the easiest way to get started with Next.js. |
| |
|
| | Basic usage: |
| |
|
| | ```bash filename="Terminal" |
| | npx create-next-app@latest [project-name] [options] |
| | ``` |
| |
|
| | |
| |
|
| | The following options are available: |
| |
|
| | | Options | Description | |
| | | --------------------------------------- | --------------------------------------------------------------------- | |
| | | `-h` or `--help` | Show all available options | |
| | | `-v` or `--version` | Output the version number | |
| | | `--no-*` | Negate default options. E.g. `--no-ts` | |
| | | `--ts` or `--typescript` | Initialize as a TypeScript project (default) | |
| | | `--js` or `--javascript` | Initialize as a JavaScript project | |
| | | `--tailwind` | Initialize with Tailwind CSS config (default) | |
| | | `--react-compiler` | Initialize with React Compiler enabled | |
| | | `--eslint` | Initialize with ESLint config | |
| | | `--biome` | Initialize with Biome config | |
| | | `--no-linter` | Skip linter configuration | |
| | | `--app` | Initialize as an App Router project | |
| | | `--api` | Initialize a project with only route handlers | |
| | | `--src-dir` | Initialize inside a `src/` directory | |
| | | `--turbopack` | Force enable Turbopack in generated package.json (enabled by default) | |
| | | `--webpack` | Force enable Webpack in generated package.json | |
| | | `--import-alias <alias-to-configure>` | Specify import alias to use (default "@/\*") | |
| | | `--empty` | Initialize an empty project | |
| | | `--use-npm` | Explicitly tell the CLI to bootstrap the application using npm | |
| | | `--use-pnpm` | Explicitly tell the CLI to bootstrap the application using pnpm | |
| | | `--use-yarn` | Explicitly tell the CLI to bootstrap the application using Yarn | |
| | | `--use-bun` | Explicitly tell the CLI to bootstrap the application using Bun | |
| | | `-e` or `--example [name] [github-url]` | An example to bootstrap the app with | |
| | | `--example-path <path-to-example>` | Specify the path to the example separately | |
| | | `--reset-preferences` | Explicitly tell the CLI to reset any stored preferences | |
| | | `--skip-install` | Explicitly tell the CLI to skip installing packages | |
| | | `--disable-git` | Explicitly tell the CLI to disable git initialization | |
| | | `--yes` | Use previous preferences or defaults for all options | |
| |
|
| | |
| |
|
| | |
| |
|
| | To create a new app using the default template, run the following command in your terminal: |
| |
|
| | ```bash filename="Terminal" |
| | npx create-next-app@latest |
| | ``` |
| |
|
| | On installation, you'll see the following prompts: |
| | |
| | ```txt filename="Terminal" |
| | What is your project named? my-app |
| | Would you like to use the recommended Next.js defaults? |
| | Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, Turbopack |
| | No, reuse previous settings |
| | No, customize settings - Choose your own preferences |
| | ``` |
| | |
| | If you choose to `customize settings`, you'll see the following prompts: |
| |
|
| | ```txt filename="Terminal" |
| | Would you like to use TypeScript? No / Yes |
| | Which linter would you like to use? ESLint / Biome / None |
| | Would you like to use React Compiler? No / Yes |
| | Would you like to use Tailwind CSS? No / Yes |
| | Would you like your code inside a `src/` directory? No / Yes |
| | Would you like to use App Router? (recommended) No / Yes |
| | Would you like to customize the import alias (`@/*` by default)? No / Yes |
| | What import alias would you like configured? @/* |
| | ``` |
| |
|
| | After the prompts, `create-next-app` will create a folder with your project name and install the required dependencies. |
| |
|
| | |
| |
|
| | **ESLint**: The traditional and most popular JavaScript linter. Includes Next.js-specific rules from `@next/eslint-plugin-next`. |
| |
|
| | **Biome**: A fast, modern linter and formatter that combines the functionality of ESLint and Prettier. Includes built-in Next.js and React domain support for optimal performance. |
| |
|
| | **None**: Skip linter configuration entirely. You can always add a linter later. |
| |
|
| | Once you've answered the prompts, a new project will be created with your chosen configuration. |
| | |
| | ### With an official Next.js example |
| | |
| | To create a new app using an official Next.js example, use the `--example` flag. For example: |
| | |
| | ```bash filename="Terminal" |
| | npx create-next-app@latest --example [example-name] [your-project-name] |
| | ``` |
| | |
| | You can view a list of all available examples along with setup instructions in the [Next.js repository](https://github.com/vercel/next.js/tree/canary/examples). |
| | |
| | ### With any public GitHub example |
| | |
| | To create a new app using any public GitHub example, use the `--example` option with the GitHub repo's URL. For example: |
| |
|
| | ```bash filename="Terminal" |
| | npx create-next-app@latest --example "https://github.com/.../" [your-project-name] |
| | ``` |
| |
|
