How do you create a new Next.js application?

Question

Accepted Answer

The official scaffolder is create-next-app . Run it with your package manager: npx create-next-app@latest my-app # or pnpm create next-app my-app yarn create next-app my-app You'll get an interactive prompt asking about TypeScript, ESLint, Tailwind CSS, the src/ directory layout, App Router vs Pages Router, Turbopack, and import aliases. For most new projects, accept the defaults: TypeScript on, App Router, Tailwind, Turbopack. Skip the prompt with flags when scripting: npx create-next-app@latest my-app \ --typescript --tailwind --eslint \ --app --src-dir --use-pnpm \ --import-alias "@/*" What you get: app/ — your routes, layouts, and pages. public/ — static assets served at the root. next.config.js (or .ts ) — framework config. tsconfig.json — strict TypeScript config wired up. package.json with the standard scripts: dev , build , start , lint . Run the dev server: cd my-app npm run dev # http://localhost:3000 Other ways to start: From a template — npx create-next-app --example with-mdx my-app bootstraps from any of the official examples. From a GitHub repo — --example https://github.com/user/repo/tree/main/path uses any directory in any repo as a starter. Manual install — for adding Next.js to an existing project: npm install next react react-dom , then add the dev/build/start scripts and create an app/ directory yourself. For real projects, after scaffolding most teams add: a UI library ( shadcn/ui ), a database client ( Prisma or Drizzle ), an auth library ( Auth.js or Clerk ), and a deployment target ( Vercel , Cloudflare , or self-hosted via Docker). Know the create-next-app prompts by heart: TypeScript, ESLint, Tailwind, App Router, src/ directory. Mention the --example flag for templates. Being able to set up a project quickly shows practical experience.