Creating a project

A Next.js project is created by the official create-next-app tool. It downloads the framework, sets up TypeScript, the linter and styles, and adds a starter page. Next.js 16 requires Node.js 20.9 or newer, preferably the current LTS version.

Creating

npx create-next-app@latest blog

First the tool asks whether to use the recommended settings. "Yes, use recommended defaults" suits the course: it enables TypeScript, ESLint, Tailwind CSS, the App Router and the @/* import alias. If you customise the settings, answer like this:

Question	Answer
TypeScript	Yes
Linter	ESLint
React Compiler	No
Tailwind CSS	Yes
`src/` directory	No
App Router	Yes
Import alias	No (keeps `@/*`)
AGENTS.md	Your choice

There is no Turbopack question: in Next.js 16 this fast bundler is on by default.

Running

cd blog
npm run dev

The command starts the development server. Open http://localhost:3000 — the Next.js starter page appears. The server watches files: after you save, changes show up in the browser right away.

Project structure

blog/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── AGENTS.md
├── eslint.config.mjs
├── next.config.ts
├── package.json
└── tsconfig.json

File or folder	What is inside
`app/`	Pages, layouts and API — most work happens here
`app/page.tsx`	The home page, address `/`
`app/layout.tsx`	The root layout: shared HTML for every page
`app/globals.css`	Global styles
`public/`	Files served as is: images, `robots.txt`
`next.config.ts`	Next.js settings
`eslint.config.mjs`	ESLint linter rules
`AGENTS.md`	Hints for AI assistants; does not affect the site

Folders for your own code — components/ for components and lib/ for functions — go in the project root next to app/.

Commands

The scripts live in package.json:

npm run dev     # development server
npm run build   # production build
npm run start   # run the built app
npm run lint    # check code with the linter (runs eslint)

Next.js 16 has no next lint command any more: the lint script calls ESLint directly, and npm run build does not run the linter.

The @ alias

The project is created with the @/* setting in tsconfig.json. It lets you write paths from the project root instead of long ../../:

// app/page.tsx
import { getPosts } from '@/lib/posts';

This import works from any folder of the project.

Common mistake

Running npm run dev from the parent folder instead of the project folder. The command looks for package.json in the current folder and without it fails with "Missing script: dev". Go into the project folder first with cd blog.

Thanks for reading!