---
title: "03 — create-next-app — The Zero-Config Onramp"
uid: create-next-app
tags: ["roadmap:nextjs", "create-next-app", "tooling", "cli", "nextjs"]
excerpt: "One command materializes a working Next.js project — structure, dependencies, TypeScript, ESLint, Tailwind — so the first npm run dev actually runs."
date: 2026-08-13T03:28:03+0000
source: https://www.aveshina.my.id/en/blog/create-next-app
---

The easiest on-ramp into a Next.js project [1] is also the most practical test of how opinionated the framework is. The model that clicked is purely practical: **it is a single command that materializes a working, runnable Next.js project** — directory structure, dependencies, TypeScript config, ESLint, and optional Tailwind — so that npm run dev produces a running dev server the moment it finishes. Everything I'd otherwise assemble by hand, the scaffold does for me with opinionated defaults.

## What it actually does

create-next-app is the documented starting point for new Next.js applications [1][2]. Running it drops a complete project on disk:

- A package.json with next, react, and react-dom pinned to compatible versions.
- The conventional directory layout (app/ for App Router projects, or pages/ for the legacy router).
- Configuration files — next.config.js, tsconfig.json if TypeScript is selected, eslint.config.mjs, a Tailwind config if selected.
- A public/ folder for static assets.
- A root layout and a starter page that renders the default landing.

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

The interactive prompts let me opt into TypeScript, ESLint, Tailwind CSS, src/ directory layout, App Router, and import alias customization. Each answer shapes the scaffold; the result is a project that runs immediately with npm run dev.

## Why a scaffolder matters

The honest value is consistency. A framework's recommended project layout, tooling stack, and configuration are not things every developer should be re-deriving. create-next-app encodes the canonical setup, which means:

- **No config drift.** New projects start with the versions and settings the Next.js team tests against.
- **Fast onboarding.** A teammate cloning the repo runs npm install && npm run dev and gets the same dev server the original author had.
- **Sensible defaults out of the box.** TypeScript and ESLint are one prompt away, not a multi-step setup.

The trade-off is the same as any scaffold: it makes decisions for me, and understanding those decisions still matters. The scaffold gives me a working project; it does not give me understanding of the App Router, Server Components, or caching. Those come from the rest of these notes.

## Templates and examples

Beyond the default template, create-next-app can bootstrap from any public GitHub example, which is useful for starting from a known-good integration (Prisma, Supabase, a specific UI library) instead of wiring it by hand [1]. The official examples repository holds hundreds. The principle I follow: reach for an example when the integration has non-obvious config, and use the default template when I'm going to add everything myself anyway.

## How I use this

Every new Next.js project I start begins with create-next-app. The thirty seconds of prompts save me an hour of boilerplate and guarantee I'm starting from the recommended baseline. The only times I deviate are migrations of existing projects, where the scaffold's assumptions don't apply.

## References

[1] Vercel, "create-next-app," Next.js Docs, 2024. [Online]. Available: [https://nextjs.org/docs/app/api-reference/cli/create-next-app](https://nextjs.org/docs/app/api-reference/cli/create-next-app)

[2] "Create Next App | Create Next.js Project," YouTube, 2024. [Video]. Available: [https://www.youtube.com/watch?v=o1cRvsrHbfo](https://www.youtube.com/watch?v=o1cRvsrHbfo)

[3] Vercel, "Next.js — The React framework for the web," nextjs.org, 2024. [Online]. Available: [https://nextjs.org/](https://nextjs.org/)

[4] Vercel, "Next.js documentation," Next.js Docs, 2024. [Online]. Available: [https://nextjs.org/docs](https://nextjs.org/docs)

```quiz
Q: What does `npx create-next-app@latest` produce?
- A Next.js plugin for an existing project
- A complete, runnable Next.js project with dependencies, config, and a default page
correct: 1
explain: create-next-app scaffolds a full project — package.json, directory layout, TypeScript/ESLint/Tailwind config, and a starter page — so `npm run dev` works immediately.

Q: Why prefer the official scaffolder over assembling a Next.js project by hand?
- It produces a faster production build
- It encodes the canonical, tested setup and avoids config drift between projects
correct: 1
explain: The scaffold bakes in the versions and settings the Next.js team tests against, giving every new project a consistent, recommended baseline without manual boilerplate.

Q: create-next-app can only generate the default template. True or false?
- True
- False — it can also bootstrap from public GitHub examples
correct: 1
explain: Beyond the default template, create-next-app accepts an example from a public GitHub repo, useful for starting from a known-good integration.
```