Next.js 가 주는 것들

Convention 표 한 번에

React 가 안 채우는 자리마다 Next.js 한테 convention 이 있어. 한 번 외워두면 매번 다시 발견 안 해:

문제	Convention
Routing	File-system: `page.tsx` 가 들어 있는 폴더 = route
Layout	Segment 마다 `layout.tsx`, navigation 너머에서도 살아남음
Loading	`loading.tsx`, Suspense 자동 wiring
Error	segment 마다 `error.tsx`, root 에 `global-error.tsx`
API endpoint	`route.ts` handler (GET/POST/…)
Server data	`async` Server Component, fetch 직접
Mutation	Server Action (`'use server'`)
Bundling	Turbopack (Rust) — v16 부터 default
Image / font / script	`next/image`, `next/font`, `next/script`
Production 서버	`next start` — Node 어디든, 또는 self-host edge

Starter 모양

CLI 가 default 깔아줘 — TypeScript on, ESLint on, App Router on, Turbopack on, Tailwind 선택, src/ 선택, import alias @/*.

표 외워두는 가치

Next.js 헷갈림 대부분이 위 표 건너뛰고 이미 box 에 있는 걸 npm 으로 다시 끌어오면서 생겨. 표 먼저 보고, 거기 있으면 built-in 써.

Code

최신 Next.js project bootstrap·bash

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

설치 결과 한 번 확인·bash

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

Convention 표 한 번에

Starter 모양

표 외워두는 가치

Code

External links

Exercise

Progress

댓글 0