Creating a Next.js Project

Analogy categoryAnalogies

The official way to start a new Next.js application is the create-next-app command-line tool, run via npx, yarn create, pnpm create, or bun create. It scaffolds a working project with sensible defaults, installs dependencies, and initializes a git repository, saving you from manually configuring a bundler, TypeScript, and linting from scratch. Node.js 18.18 or later is required to run modern versions of Next.js.

🏏

Cricket analogy: create-next-app scaffolding a ready project is like a curator preparing a pitch overnight before a match — rolled, watered, and marked — so play can start immediately instead of the ground staff building it from bare earth.

Using create-next-app

Running npx create-next-app@latest walks you through an interactive prompt: project name, whether to use TypeScript, ESLint, Tailwind CSS, the src/ directory convention, the App Router (recommended, default yes), and a custom import alias such as @/*. Each answer configures the generated tsconfig.json, next.config.js, and folder layout accordingly, so the resulting project matches your team's conventions from the first commit.

🏏

Cricket analogy: Answering create-next-app's prompts is like a toss-winning captain choosing to bat or bowl and setting the field — each early decision (TypeScript, Tailwind) shapes the whole innings that follows.

bash

npx create-next-app@latest my-app
# ✔ 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? Yes
# ✔ Would you like to use App Router? (recommended) Yes
# ✔ Would you like to customize the import alias (@/* by default)? No

cd my-app
npm run dev
# ▲ Next.js 15.0.0
# - Local:        http://localhost:3000

Project Structure Explained

A freshly scaffolded project contains an app/ folder (or src/app/) with layout.tsx and page.tsx, a public/ folder for static assets served from the root URL, next.config.js for framework-level configuration, tsconfig.json for TypeScript settings, and package.json with dev, build, start, and lint scripts wired to the next CLI. Environment variables go in .env.local, which is git-ignored by default.

🏏

Cricket analogy: The public/ folder serving static assets directly is like the players' honours board displayed unchanged at the stadium entrance — fixed content served as-is, with no processing needed before spectators see it.

The generated package.json includes four key scripts: "dev" runs the development server with Fast Refresh, "build" compiles an optimized production bundle, "start" serves that production build, and "lint" runs ESLint against the project using Next.js's recommended rule set.

Running the Development Server

Running npm run dev (or the yarn/pnpm/bun equivalent) starts the Next.js development server, by default on http://localhost:3000. It enables Fast Refresh, which preserves component state while reflecting most code edits in the browser almost instantly, and prints compile errors and warnings directly in the terminal and browser overlay so issues are caught early during development.

🏏

Cricket analogy: Fast Refresh preserving component state during edits is like a batter continuing their innings uninterrupted while the groundskeeper quickly patches a rough patch on the pitch between overs.

Next.js 15 requires Node.js 18.18 or later; running an older Node version will cause create-next-app or next dev to fail with cryptic errors. If npm install hangs or fails, clearing the .next cache folder and node_modules, then reinstalling, resolves most stale-dependency issues.

create-next-app is the official CLI for scaffolding a new Next.js project.
It prompts for TypeScript, ESLint, Tailwind, src/ directory, App Router, and import alias.
Node.js 18.18 or later is required for modern Next.js versions.
The generated project includes app/, public/, next.config.js, and tsconfig.json.
package.json includes dev, build, start, and lint scripts.
npm run dev starts a local server at localhost:3000 with Fast Refresh enabled.
.env.local is the conventional, git-ignored location for local secrets.

Practice what you learned

1. What command is used to scaffold a new Next.js project?

2. Which folder is used for static assets that should be served directly from the site root?

3. What minimum Node.js version does modern Next.js require?

4. What does the Fast Refresh feature in the Next.js dev server do?

5. Where should local environment secrets conventionally be stored in a Next.js project?

Was this page helpful?

The App Router vs Pages Router

File-Based Routing

Related Study Notes in Web Development

Browse all study notes

Web Development

WebSockets Study Notes

Web Development · 30 topics

Web Development

WebAssembly Study Notes

WebAssembly · 30 topics

Web Development

gRPC Study Notes

Protocol Buffers · 30 topics

Web Development

Spring Boot Study Notes

Java · 30 topics

Web Development

Flask Study Notes

Python · 30 topics

Web Development

Django Study Notes

Python · 30 topics

Topics covered

#JavaScript#NextJsStudyNotes#WebDevelopment#CreatingANextJsProject#Creating#Next#Project#Create#StudyNotes#SkillVeris

Creating a Next.js Project