create-next-app

What is create-next-app?

The create-next-app npm package is a command-line tool that allows you to quickly set up a new Next.js project with a default configuration. It simplifies the process of bootstrapping a Next.js application by providing a pre-configured project structure, dependencies, and scripts.

What are create-next-app's main functionalities?

Bootstrap a New Next.js Project

This command initializes a new Next.js project in a directory named 'my-next-app'. It sets up the project with a default configuration, including necessary dependencies and scripts.

npx create-next-app@latest my-next-app

Use a Custom Template

This command initializes a new Next.js project using a custom template. In this example, the 'blog-starter' template is used to set up a blog application with pre-configured settings and components.

npx create-next-app@latest my-next-app --example blog-starter

TypeScript Support

This command initializes a new Next.js project with TypeScript support. It sets up the necessary TypeScript configuration and dependencies, allowing you to write your application in TypeScript from the start.

npx create-next-app@latest my-next-app --typescript

Other packages similar to create-next-app

create-react-app

Create React App is a similar tool for bootstrapping React applications. It provides a default project structure, configuration, and scripts for building React applications. While create-next-app is tailored for Next.js, which includes server-side rendering and static site generation, Create React App is focused on client-side rendering.

vue-cli

Vue CLI is a command-line tool for scaffolding Vue.js projects. It offers a similar experience to create-next-app but for Vue.js applications. Vue CLI provides a range of templates and plugins to customize the project setup, whereas create-next-app is specifically designed for Next.js.

angular-cli

Angular CLI is a command-line interface for Angular applications. It helps in setting up a new Angular project with a default configuration, similar to create-next-app for Next.js. Angular CLI includes features like code generation, testing, and deployment, tailored for Angular applications.

README

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:

Interactive

You can create a new project interactively by running:

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

You will be asked for the name of your project, and then whether you want to create a TypeScript project:

✔ Would you like to use TypeScript? … No / Yes

Select Yes to install the necessary types/dependencies and create a new TS project.

Non-interactive

You can also pass command line arguments to set up a new project non-interactively. See create-next-app --help:

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.

  --turbopack

    Enable Turbopack by default for development.

  --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, --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 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

  --skip-install

    Explicitly tell the CLI to skip installing packages

  --disable-git

    Explicitly tell the CLI to skip initializing a git repository.

  --yes

    Use previous preferences or defaults for all options that were not
    explicitly specified, without prompting.

  -h, --help                           display help for command

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 route-handlers).
• 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.