Creating a Next.js App

Use create-next-app to scaffold a new project with TypeScript, the App Router, and sensible defaults.

Syntaxnpx create-next-app@latest my-app

The official way to start a project is create-next-app. It sets up TypeScript, ESLint, the App Router, and optionally Tailwind CSS.

Steps

  1. Run the create command below (needs Node.js 18.18 or newer).
  2. Answer the prompts (choose TypeScript and the App Router).
  3. cd into the folder and start the dev server.

The app runs at http://localhost:3000 with hot reloading.

Example

Example · bash
# Scaffold a new project (accept the App Router + TypeScript defaults)
npx create-next-app@latest my-app

cd my-app
npm run dev
# open http://localhost:3000

When to use it

  • A developer starts a new SaaS dashboard in under a minute using create-next-app with TypeScript and Tailwind enabled.
  • A team bootstraps a consistent project structure for every micro-frontend by running create-next-app inside a monorepo.
  • A freelancer generates a production-ready project with ESLint pre-configured to enforce code quality from day one.

More examples

Interactive scaffold command

The CLI wizard prompts for TypeScript, ESLint, Tailwind, and App Router preferences before generating the project.

Example · bash
npx create-next-app@latest my-app

Non-interactive with flags

Flags skip every prompt, useful in CI scripts or when sharing a repeatable team setup.

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

Generated npm scripts

create-next-app pre-wires the four essential scripts so the team can start developing immediately.

Example · json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Related

next project structurenext dev build

Discussion

  • Be the first to comment on this lesson.