Create Next App

Scaffolding a Project with create-next-app

Rather than manually creating package.json, installing next, react, and react-dom, and writing configuration files by hand, create-next-app does all of that in seconds and asks a short series of questions to customize the result (TypeScript, ESLint, Tailwind CSS, the src/ directory, App Router vs. Pages Router, and import aliases).

You never install create-next-app permanently; npx (or your package manager's equivalent) downloads and runs the latest version each time, so you always scaffold with the newest templates and defaults.

npx create-next-app@latest my-app

# You will be prompted:
# ✔ Would you like to use TypeScript? Yes
# ✔ Would you like to use ESLint? Yes
# ✔ Would you like to use Tailwind CSS? Yes
# ✔ Would you like your code inside a `src/` directory? No
# ✔ Would you like to use App Router? Yes
# ✔ Would you like to customize the import alias? No

Answering "Yes" to App Router creates an app/ directory; answering "No" falls back to the legacy pages/ directory.

Non-Interactive Setup with Flags

npx create-next-app@latest my-app \
  --typescript \
  --eslint \
  --tailwind \
  --app \
  --no-src-dir \
  --import-alias "@/*"

• Every interactive prompt has a matching CLI flag for scripted or CI-driven project creation.
• --app forces the App Router; --no-app forces the Pages Router.
• --import-alias configures a path alias like @/components in tsconfig.json automatically.
• Running the command with no project name prompts you for one interactively.

create-next-app Flags Cheat Sheet

The flags you'll reach for most often when scaffolding a new project.

What Gets Generated

A default TypeScript + App Router project includes a home page, a root layout with basic global styles, a favicon, and a public/ folder for static assets — enough to run npm run dev immediately and see a working page.

my-app/
  app/
    favicon.ico
    globals.css
    layout.tsx
    page.tsx
  public/
    next.svg
    vercel.svg
  next.config.js
  package.json
  tsconfig.json

This is the default output; your choices during setup (Tailwind, src/, etc.) change some file locations.

Running Your New Project

Once scaffolding finishes, cd into the new folder and start the development server. Next.js prints the local URL (typically http://localhost:3000) and watches your files for changes.

• cd my-app — move into the generated project folder.
• npm run dev — start the development server.
• Open http://localhost:3000 in your browser to see the starter page.
• Edit app/page.tsx and save — the browser updates instantly via Fast Refresh.

Common Mistakes

• Running create-next-app inside an existing project folder instead of specifying a new folder name.
• Choosing the Pages Router by accident when following an App Router tutorial (or vice versa).
• Forgetting to cd into the new project directory before running npm run dev.
• Mixing package managers (e.g. installing with npm after scaffolding with pnpm), causing lockfile conflicts.

Key Takeaways

• npx create-next-app@latest is the official way to scaffold a new Next.js project.
• Interactive prompts cover TypeScript, ESLint, Tailwind CSS, src/, and router choice.
• Every prompt has an equivalent CLI flag for non-interactive, scripted project creation.
• The generated project runs immediately with npm run dev, no extra configuration required.
• Stick to one package manager per project to avoid lockfile conflicts.