create-next-app

create-next-app

Creating a Project with create-next-app

create-next-app is the official generator. Run it with npx and it downloads, executes and discards itself, so there is nothing to install globally:

Creating the Bookshelf front endShell

npx create-next-app@latest bookshelf-web --ts --app --tailwind --eslint \
  --src-dir --import-alias "@/*" --use-npm

Output

Using defaults for unprovided options:
  --no-react-compiler     No React Compiler (use --react-compiler for React Compiler)
Creating a new Next.js app in C:\...\bookshelf-web.
Initializing project with template: app-tw
added 364 packages, and audited 365 packages in 39s
found 0 vulnerabilities
Generating route types...
✓ Types generated successfully
Initialized a git repository.
Success! Created bookshelf-web at C:\...\bookshelf-web

Three details matter. The template is app-tw — App Router plus Tailwind 5,202 ; without --tailwind it is app. "Generating route types" writes the typed-route definitions of Typed Routes, and repeats on every build. And Git 1,932 is initialized with a .gitignore excluding node_modules, .next, .vercel and every .env* file.

With no flags it asks instead. Next.js 16 10,514 collapsed the old questionnaire into one question — "Would you like to use the recommended Next.js defaults?" — answered with use recommended defaults, reuse previous settings, or customize settings. Only the third path asks about TypeScript, the linter, the React 7,897 Compiler, Tailwind, src/, the App Router and the import alias. Flags skip all of that:

--ts (default) or --js; --app selects the App Router; --src-dir puts code under src/.
--eslint or --biome picks a linter; omit both for none.
--empty drops the demo page; --api generates Route Handlers only.
--use-npm, --use-pnpm, --use-yarn or --use-bun forces a package manager.

-e is the fastest way to read real code: it takes the name of any folder in the Next.js examples directory (https://github.com/vercel/next.js/tree/canary/examples 142,812 ) — 231 of them in September 2026 — or the URL of a public repository laid out as a Next.js project.

Starting from an official example instead of the blank templateShell

npx create-next-app@latest mongo-demo --use-npm -e with-mongodb

src/app/page.tsx holds the placeholder landing page. Replace it with a single <h1>, save, and the browser updates without reloading: Turbopack 10,514 pushed only the changed module.

MENU