āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š nextjs/app/api-reference/cli/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 create-next-app CLI allow you to create a new Next.js application using the default template or an example from a public GitHub repository. It is the easiest way to get started with Next.js.
Basic usage:
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:
npx create-next-app@latest
On installation, you'll see the following prompts:
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:
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.
To create a new app using an official Next.js example, use the --example flag. For example:
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.
To create a new app using any public GitHub example, use the --example option with the GitHub repo's URL. For example:
npx create-next-app@latest --example "https://github.com/.../" [your-project-name]
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā