Next.js Beginner Guide

$ npx create-next-app@16.3.8 taskboard --yes --use-npm
Creating a new Next.js app in ~/taskboard.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- next
- react
- react-dom

Installing devDependencies:
- @tailwindcss/postcss
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- tailwindcss
- typescript

npm warn deprecated eslint@9.39.5: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 365 packages, and audited 366 packages in 18s

147 packages are looking for funding
  run `npm fund` for details

5 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Generating route types...
✓ Types generated successfully

Initialized a git repository.

Success! Created taskboard at ~/taskboard

I pinned the version so the guide matches what you see; normally you'd type create-next-app@latest. The audit warnings are about packages used by ESLint, not by your app. Don't run npm audit fix --force blindly: it can install incompatible versions.ผมระบุเวอร์ชันไว้เพื่อให้คู่มือตรงกับสิ่งที่เห็น ปกติจะพิมพ์ create-next-app@latest คำเตือนจาก audit เป็นเรื่องของแพ็กเกจที่ ESLint ใช้ ไม่ใช่ของแอปเรา อย่ารัน npm audit fix --force โดยไม่คิด เพราะอาจติดตั้งเวอร์ชันที่เข้ากันไม่ได้

$ cd taskboard && tree -a -I 'node_modules|.next|.git' --noreport .
.
├── .gitignore
├── AGENTS.md
├── CLAUDE.md
├── README.md
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
└── tsconfig.json

$ npm run dev -- -p 3200
> taskboard@0.1.0 dev
> next dev -p 3200

▲ Next.js 16.3.8 (Turbopack)
- Local:         http://localhost:3200
- Network:       http://192.168.1.34:3200
✓ Ready in 208ms
✓ Running next.config.ts took 64ms

 GET / 200 in 1606ms (next.js: 1546ms, application-code: 61ms)

The default port is 3000; another app on my computer was using it, so -p 3200 picks another one. Turbopack is the bundler that compiles your code. The first GET / took 1.5 s because the page was compiled on demand; I stopped the server with Ctrl+C.พอร์ตปกติคือ 3000 แต่มีแอปอื่นในเครื่องผมใช้อยู่ -p 3200 จึงเลือกพอร์ตอื่น Turbopack คือตัว bundler ที่คอมไพล์โค้ดของเรา GET / ครั้งแรกใช้เวลา 1.5 วินาทีเพราะเพจถูกคอมไพล์ตอนที่ถูกเรียก ผมหยุดเซิร์ฟเวอร์ด้วย Ctrl+C

$ curl -s localhost:3200/about | grep -o '<h1[^>]*>[^<]*</h1>'
<h1 class="text-2xl font-bold">About</h1>

$ curl -s -o /dev/null -w "%{http_code}\n" localhost:3200/contact
404

The heading is already in the HTML, before any JavaScript runs; that's good for speed and for search engines. A URL with no page gets a 404.หัวข้ออยู่ใน HTML แล้วตั้งแต่ก่อน JavaScript ทำงาน ซึ่งดีทั้งต่อความเร็วและต่อเครื่องมือค้นหา ส่วน URL ที่ไม่มีเพจจะได้ 404

$ curl -s localhost:3200 | grep -o '<li>[^/]*</li>'
<li>✅<!-- --> <!-- -->Install Node.js</li>
<li>✅<!-- --> <!-- -->Create a Next.js app</li>
<li>⬜<!-- --> <!-- -->Learn server components</li>

The tasks arrive inside the HTML. The <!-- --> markers are how React keeps neighbouring pieces of text apart.รายการงานมาพร้อมกับ HTML ส่วน <!-- --> คือเครื่องหมายที่ React ใช้แยกข้อความที่อยู่ติดกัน

rendering the home page with 3 tasks
 GET / 200 in 680ms (next.js: 615ms, application-code: 65ms)
rendering the home page with 3 tasks
 GET / 200 in 24ms (next.js: 3ms, application-code: 21ms)

console.log in a Server Component prints here, in the server's terminal, once per request: first for curl, then for the browser. In development, Next.js also copies these lines into the browser console with a Server label.console.log ใน Server Component พิมพ์ที่นี่ ในเทอร์มินัลของเซิร์ฟเวอร์ ครั้งละหนึ่งบรรทัดต่อคำขอ ครั้งแรกจาก curl แล้วจากเบราว์เซอร์ ตอนพัฒนา Next.js ยังคัดลอกบรรทัดเหล่านี้ไปที่ console ของเบราว์เซอร์พร้อมป้าย Server ด้วย

TaskList: filter = all
 GET / 200 in 710ms (next.js: 643ms, application-code: 67ms)

TaskList: filter = all
TaskList: filter = all
TaskList: filter = open
TaskList: filter = open
TaskList: filter = done
TaskList: filter = done

A Client Component still renders once on the server, to make the first HTML (the line in the terminal). Then it runs in the browser, and every click renders it again. In development React renders each time twice on purpose, to catch bugs, so every line appears twice; a production build renders once. Two unrelated console lines (a React DevTools tip and [HMR] connected) are left out.Client Component ยังเรนเดอร์บนเซิร์ฟเวอร์หนึ่งครั้งเพื่อสร้าง HTML แรก (บรรทัดในเทอร์มินัล) จากนั้นทำงานในเบราว์เซอร์ และทุกครั้งที่คลิกจะเรนเดอร์ใหม่ ตอนพัฒนา React ตั้งใจเรนเดอร์ซ้ำสองครั้งเพื่อจับบั๊ก ทุกบรรทัดจึงปรากฏสองครั้ง ส่วน build สำหรับ production จะเรนเดอร์ครั้งเดียว บรรทัดใน console ที่ไม่เกี่ยวข้องสองบรรทัด (คำแนะนำ React DevTools และ [HMR] connected) ถูกตัดออก

$ curl -s localhost:3200/tasks/1 | grep -o '<title>[^<]*</title>'
<title>Install Node.js · Taskboard</title>

$ curl -s localhost:3200/tasks/99 | grep -o '<title>[^<]*</title>'
<title>Not found · Taskboard</title>

$ curl -s -o /dev/null -w "%{http_code}\n" localhost:3200/tasks/99
404

$ for i in 1 2; do curl -s -o /dev/null -w "%{http_code} in %{time_total}s\n" localhost:3200/tasks/3; done
200 in 1.811944s
200 in 1.032233s

getTask(3)
 GET /tasks/3 200 in 1808ms (next.js: 767ms, application-code: 1041ms)
getTask(3)
 GET /tasks/3 200 in 1026ms (next.js: 6ms, application-code: 1021ms)

The first request also compiled the page. Each request printed getTask(3) once, although generateMetadata and the page both call it: cache() shares the result within one request, so the second request took 1 s, not 2.คำขอแรกต้องคอมไพล์เพจด้วย แต่ละคำขอพิมพ์ getTask(3) เพียงครั้งเดียว แม้ว่า generateMetadata และเพจจะเรียกทั้งคู่ cache() ใช้ผลลัพธ์ร่วมกันภายในคำขอเดียว คำขอที่สองจึงใช้เวลา 1 วินาที ไม่ใช่ 2

getTask(1)
⨯ SyntaxError: Unexpected token ']', ..." false },
]
" is not valid JSON
    at JSON.parse (<anonymous>)
    at getTasks (lib/tasks.ts:15:15)
    at async (lib/tasks.ts:23:17)
  13 | export async function getTasks(): Promise<Task[]> {
  14 |   const text = await readFile(FILE, "utf8");
> 15 |   return JSON.parse(text);
     |               ^
  16 | }
  17 |
  18 | // cache(): if the page and generateMetadata both ask for task 3 {
  digest: '3512113249'
}
⋯ 15 lines: the same error again, because the page and generateMetadata both failed ⋯⋯ 15 บรรทัด: ข้อผิดพลาดเดิมอีกครั้ง เพราะทั้งเพจและ generateMetadata ล้มเหลว ⋯
 GET /tasks/1 200 in 1037ms (next.js: 11ms, application-code: 1026ms)

$ curl -s -o /dev/null -w "%{http_code}\n" localhost:3200/tasks/99
200

$ curl -s localhost:3200/tasks/99 | grep -o '<meta name="robots"[^>]*>'
<meta name="robots" content="noindex"/>

 POST / 200 in 16ms (next.js: 1.6ms, application-code: 14ms)
  └─ ƒ createTask({}) in 2ms app/actions.ts
 GET / 200 in 14ms (next.js: 1.3ms, application-code: 13ms)
 POST / 200 in 17ms (next.js: 1.0ms, application-code: 16ms)
 GET /tasks/4 200 in 279ms (next.js: 259ms, application-code: 21ms)
 POST /tasks/4 200 in 20ms (next.js: 4ms, application-code: 16ms)
  └─ ƒ toggleDone({}) in 1ms app/actions.ts

Each action is a POST to the page, and the dev server names the function it ran. The second POST / came from a browser with JavaScript turned off: the form still worked, because without JavaScript the browser submits it the old way and Next.js answers with the updated page.แต่ละ action คือ POST ไปที่เพจ และเซิร์ฟเวอร์บอกชื่อฟังก์ชันที่รัน POST / ครั้งที่สองมาจากเบราว์เซอร์ที่ ปิด JavaScript ฟอร์มก็ยังใช้งานได้ เพราะถ้าไม่มี JavaScript เบราว์เซอร์จะส่งฟอร์มแบบดั้งเดิม แล้ว Next.js ตอบกลับด้วยหน้าที่อัปเดตแล้ว

$ cat data/tasks.json
[
  {
    "id": 1,
    "title": "Install Node.js",
    "done": true
  },
  {
    "id": 2,
    "title": "Create a Next.js app",
    "done": true
  },
  {
    "id": 3,
    "title": "Learn server components",
    "done": false
  },
  {
    "id": 4,
    "title": "Write a server action",
    "done": true
  },
  {
    "id": 5,
    "title": "Works without JavaScript",
    "done": false
  }
]

$ curl -s localhost:3200/api/tasks; echo
[{"id":1,"title":"Install Node.js","done":true},{"id":2,"title":"Create a Next.js app","done":true},{"id":3,"title":"Learn server components","done":false}]

$ curl -s -i -X POST localhost:3200/api/tasks -H "Content-Type: application/json" -d '{"title": "Try a route handler"}'
HTTP/1.1 201 Created
content-type: application/json

{"id":4,"title":"Try a route handler","done":false}

$ curl -s -i -X POST localhost:3200/api/tasks -H "Content-Type: application/json" -d '{"title": ""}'
HTTP/1.1 400 Bad Request
content-type: application/json

{"error":"title is required"}

$ curl -s -X POST localhost:3200/api/tasks -d hello; echo
{"error":"title is required"}

$ curl -s -i -X DELETE localhost:3200/api/tasks
HTTP/1.1 405 Method Not Allowed

hello isn't JSON, so request.json() fails and .catch(() => null) turns that into "no body". Methods you don't export, like DELETE, get 405 Method Not Allowed automatically.hello ไม่ใช่ JSON request.json() จึงล้มเหลว และ .catch(() => null) เปลี่ยนให้เป็น "ไม่มี body" ส่วน method ที่ไม่ได้ export เช่น DELETE จะได้ 405 Method Not Allowed โดยอัตโนมัติ

$ npm run build
> taskboard@0.1.0 build
> next build

▲ Next.js 16.3.8 (Turbopack)
✓ Running next.config.ts took 11ms

  Creating an optimized production build ...
✓ Compiled successfully in 1570ms
  Running TypeScript ...
  Finished TypeScript in 666ms ...
  Collecting page data using 8 workers ...
  Generating static pages using 8 workers (0/6) ...
  Generating static pages using 8 workers (1/6) 
  Generating static pages using 8 workers (2/6) 
  Generating static pages using 8 workers (4/6) 
✓ Generating static pages using 8 workers (6/6) in 214ms
  Finalizing page optimization ...

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /about
├ ƒ /api/tasks
└ ƒ /tasks/[id]


○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

$ npm start -- -p 3300
> taskboard@0.1.0 start
> next start -p 3300

▲ Next.js 16.3.8
- Local:         http://localhost:3300
- Network:       http://192.168.1.34:3300
✓ Ready in 54ms
✓ Running next.config.ts took 12ms

$ curl -sI localhost:3300/ | grep -i -E 'x-nextjs|cache-control'
x-nextjs-cache: HIT
x-nextjs-prerender: 1
x-nextjs-prerender: 1
x-nextjs-stale-time: 300
Cache-Control: s-maxage=31536000

$ curl -sI localhost:3300/tasks/1 | grep -i -E 'x-nextjs|cache-control'
Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate

$ curl -s localhost:3300/ | grep -o '<li>' | wc -l
       3

$ curl -s -X POST localhost:3300/api/tasks -H "Content-Type: application/json" -d '{"title": "Ship it"}'; echo
{"id":4,"title":"Ship it","done":false}

$ curl -s localhost:3300/ | grep -o '<li>' | wc -l
       4

$ grep -rl "tasks.json" .next/static || echo "not found"
not found

The home page came from the prerendered file (x-nextjs-cache: HIT), while the task page is made fresh and must not be cached. After the POST the static home page showed 4 tasks, because the route handler called revalidatePath("/"); without it, the page would keep the list from build time (Mistakes). .next/static holds the files sent to browsers, and no server code is in it.หน้าแรกมาจากไฟล์ที่ prerender ไว้ (x-nextjs-cache: HIT) ส่วนหน้างานถูกสร้างใหม่ทุกครั้งและห้ามแคช หลัง POST หน้าแรกแบบ static แสดง 4 งาน เพราะ route handler เรียก revalidatePath("/") ถ้าไม่มีบรรทัดนี้ หน้าแรกจะแสดงรายการจากตอน build ตลอดไป (ข้อผิดพลาด) ส่วน .next/static เก็บไฟล์ที่ส่งไปเบราว์เซอร์ และไม่มีโค้ดฝั่งเซิร์ฟเวอร์อยู่ในนั้น

⨯ SyntaxError: Unexpected token ']', ..."alse
  },
]
" is not valid JSON
    at JSON.parse (<anonymous>)
    at h (.next/server/chunks/ssr/_1ewdccw._.js:2:465)
    at async (.next/server/chunks/ssr/_1ewdccw._.js:2:531) {
  digest: '3530759885'
}