03 — create-next-app — The Zero-Config Onramp

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

[2] "Create Next App | Create Next.js Project," YouTube, 2024. [Video]. Available: 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/

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