What Next.js Provides

The convention list, in one place

Every problem React leaves open, Next.js answers with a convention. Memorize the table once and you stop rediscovering it later:

Problem	Convention
Routing	File-system: a folder with `page.tsx` = a route
Layouts	`layout.tsx` per segment, persists across navigation
Loading state	`loading.tsx`, wired into Suspense automatically
Errors	`error.tsx` per segment, `global-error.tsx` at root
API endpoints	`route.ts` handlers (GET/POST/…)
Server data	`async` Server Components, fetch directly
Mutations	Server Actions (`'use server'`)
Bundling	Turbopack (Rust) — default since v16
Images / fonts / scripts	`next/image`, `next/font`, `next/script`
Production server	`next start` — Node anywhere, or self-host edge

The shape of a starter

The CLI sets the defaults you'll inherit for everything else: TypeScript on, ESLint on, App Router on, Turbopack on, Tailwind optional, src/ optional, import alias @/*.

Why it's worth learning the table

Most Next.js confusion comes from skipping the convention list and reaching for a third-party package that already exists in the box. Look at the table first; if it's there, prefer the built-in.

Code

Bootstrap a current Next.js project·bash

npx create-next-app@latest cwk-app
cd cwk-app
# Pick: TypeScript yes, ESLint yes, Tailwind yes (or no), App Router yes,
# Turbopack yes, src/ no, import alias '@/*'.
npm run dev
# Dev server on http://localhost:3000 with Turbopack HMR

Inspect the install·bash

tree -L 2 -I node_modules
# .
# ├── app/
# │   ├── layout.tsx
# │   ├── page.tsx
# │   └── globals.css
# ├── public/
# ├── next.config.ts
# ├── package.json
# └── tsconfig.json

The convention list, in one place

The shape of a starter

Why it's worth learning the table

Code

External links

Exercise

Progress

Comments 0