create-next-app
Setting up a React project by hand means choosing a bundler, a TypeScript setup, a linter, a dev server and a folder layout, then wiring them together. For Trailhead we skip all of that. One command produces a project that already runs.
The rule
One command scaffolds it;
devto build,buildthenstartto ship.
Run the official starter with a project name:
npx create-next-app@latest trailheadIt asks a few questions, such as whether to use TypeScript, a linter, Tailwind CSS, a src/ folder and the App Router. Accepting the recommended answers is a sensible start. Then you get a folder like this:
trailhead/
app/
layout.tsx # the shell around every page
page.tsx # the home page, at /
globals.css # styles for the whole site
public/ # files served as-is, e.g. /logo.png
next.config.ts # Next.js settings
package.json # dependencies and scripts
tsconfig.json # TypeScript settingsThe three scripts in package.json are the ones you use every day:
| Script | What it does | When |
|---|---|---|
npm run dev |
Starts the development server with fast refresh | While writing code |
npm run build |
Creates an optimised production build | Before deploying |
npm run start |
Serves the finished build | In production |
After npm run dev, open http://localhost:3000. Edit app/page.tsx, save, and the browser updates without losing its place.
Files in public are served from the site root: public/trail-map.png is at /trail-map.png. Do not put secrets there. Everything in it is public.
The shortcut
Think of the scripts as a pipeline: write with dev, freeze with build, serve with start. start can only serve what build produced, so after changing code you build again.
Scaffold
npx create-next-app@latest trailhead, accept the recommended options, thencd trailhead.
The trap is judging speed from npm run dev. The dev server compiles pages on demand and adds debugging help, so it is slower than production. Measure with build and start.
Drills
Answer fast — trust the rule.
Which command creates a new Next.js project called trailhead?
You add public/icons/boot.svg. At what URL is it served?
You changed code and want to check the production version locally. What do you run?
Which file is the home page of a new project?
Remember
- One command scaffolds the project;
app/page.tsxis the home page andpublicmaps to the root. - Shortcut: write with
dev, freeze withbuild, serve withstart. - Trap: judging performance from the dev server, or putting secrets in
public.