mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
<!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change(s) that you're making: ## For Contributors ### Improving Documentation - Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? Updated `installation.mdx` and `create-next-app.mdx` documentation. ### Why? To accurately reflect the `create-next-app` CLI's behavior regarding `AGENTS.md` and `CLAUDE.md` file generation, and to update the displayed default configuration. ### How? - **`docs/01-app/01-getting-started/01-installation.mdx`**: - Updated `--yes` flag description to mention `AGENTS.md` and `CLAUDE.md` inclusion. - Corrected the recommended defaults prompt to replace "Turbopack" with "AGENTS.md". - Added the `AGENTS.md` prompt to the customize settings section. - **`docs/01-app/03-api-reference/06-cli/create-next-app.mdx`**: - Added `--agents-md` flag to the options table. - Updated recommended defaults and customize settings prompts. Closes NEXT- Fixes # --> --- [Slack Thread](https://vercel.slack.com/archives/C07BS1WEYAZ/p1772483393984349?thread_ts=1772483393.984349&cid=C07BS1WEYAZ) <p><a href="https://cursor.com/agents/bc-2f6bce63-8c1b-544a-9a10-cb65f56b213d"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a> <a href="https://cursor.com/background-agent?bcId=bc-2f6bce63-8c1b-544a-9a10-cb65f56b213d"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a> </p> --------- Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: Joseph <[email protected]>
162 lines
7.5 KiB
Plaintext
162 lines
7.5 KiB
Plaintext
---
|
|
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 package="pnpm"
|
|
pnpm create next-app [project-name] [options]
|
|
```
|
|
|
|
```bash package="npm"
|
|
npx create-next-app@latest [project-name] [options]
|
|
```
|
|
|
|
```bash package="yarn"
|
|
yarn create next-app [project-name] [options]
|
|
```
|
|
|
|
```bash package="bun"
|
|
bun create next-app [project-name] [options]
|
|
```
|
|
|
|
## Reference
|
|
|
|
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 |
|
|
| `--agents-md` | Include `AGENTS.md` and `CLAUDE.md` to guide coding agents (default) |
|
|
| `--yes` | Use previous preferences or defaults for all options |
|
|
|
|
## Examples
|
|
|
|
### With the default template
|
|
|
|
To create a new app using the default template, run the following command in your terminal:
|
|
|
|
```bash package="pnpm"
|
|
pnpm create next-app
|
|
```
|
|
|
|
```bash package="npm"
|
|
npx create-next-app@latest
|
|
```
|
|
|
|
```bash package="yarn"
|
|
yarn create next-app
|
|
```
|
|
|
|
```bash package="bun"
|
|
bun create next-app
|
|
```
|
|
|
|
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, AGENTS.md
|
|
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? @/*
|
|
Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code? No / Yes
|
|
```
|
|
|
|
After the prompts, `create-next-app` will create a folder with your project name and install the required dependencies.
|
|
|
|
### Linter Options
|
|
|
|
**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 package="pnpm"
|
|
pnpm create next-app --example [example-name] [your-project-name]
|
|
```
|
|
|
|
```bash package="npm"
|
|
npx create-next-app@latest --example [example-name] [your-project-name]
|
|
```
|
|
|
|
```bash package="yarn"
|
|
yarn create next-app --example [example-name] [your-project-name]
|
|
```
|
|
|
|
```bash package="bun"
|
|
bun create next-app --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 package="pnpm"
|
|
pnpm create next-app --example "https://github.com/.../" [your-project-name]
|
|
```
|
|
|
|
```bash package="npm"
|
|
npx create-next-app@latest --example "https://github.com/.../" [your-project-name]
|
|
```
|
|
|
|
```bash package="yarn"
|
|
yarn create next-app --example "https://github.com/.../" [your-project-name]
|
|
```
|
|
|
|
```bash package="bun"
|
|
bun create next-app --example "https://github.com/.../" [your-project-name]
|
|
```
|