Next.js — App Router · component · Tailwind · hooks แผ่นเดียวจบ

next                  16.3.4    # Turbopack เป็นค่าปริยายของ Next 16
react / react-dom     19.2.8
typescript            5.9.3
tailwindcss           4.3.3     # ผ่าน @tailwindcss/postcss 4.3.3
eslint                9         # + eslint-config-next 16.3.4
node                  v24.14.0

# โปรเจกต์สร้างด้วย:
npx create-next-app@latest --ts --tailwind --eslint --app --no-src-dir

สารบัญ

1. คำสั่งที่ใช้จริงทุกวัน
2. โครงโฟลเดอร์ที่ได้มา — ไฟล์ไหนทำอะไร
3. path ↔ URL (+ เทียบ Gin)
4. Server Component vs Client Component
5. component + props + children + spread
6. Tailwind — utility แปลกลับเป็น CSS
7. ตาราง hooks ทั้งห้า
8. useContext — เช็คลิสต์ 6 ขั้น
9. custom hook — กฎ 4 ข้อ
10. ตารางแปล error ที่เจอบ่อย
11. ตารางกับดักรวมทั้งกลุ่ม
12. อ้างอิง

1 · คำสั่งที่ใช้จริงทุกวัน

$ npm create-next-app@latest        ← ตามสไลด์
Unknown command: "create-next-app@latest"

To see a list of supported npm commands, run:
  npm help

$ npm create --help
npm init <package-spec> (same as `npx create-<package-spec>`)

$ npx next lint
Invalid project directory provided, no such directory: /…/next-sandbox/lint

2 · โครงโฟลเดอร์ที่ได้มา — ไฟล์ไหนทำอะไร

$ ls -1a          # ผลรันจริงหลัง create-next-app (next 16.3.4)
.
..
.git              ← create-next-app สั่ง git init ให้เอง
.gitignore
AGENTS.md         ← ติดมาด้วยในเวอร์ชันนี้
CLAUDE.md         ← ติดมาด้วยในเวอร์ชันนี้
README.md
app
eslint.config.mjs
next-env.d.ts
next.config.ts
node_modules
package-lock.json
package.json
postcss.config.mjs
public
tsconfig.json

$ ls -1 app
favicon.ico
globals.css
layout.tsx
page.tsx

ไฟล์ชื่อพิเศษใต้ app/

3 · path ↔ URL (+ เทียบ Gin)

กฎมีสองข้อเท่านั้น: (1) ชื่อโฟลเดอร์ = ชิ้นส่วนหนึ่งของ URL · (2) โฟลเดอร์จะเป็นหน้าเว็บได้ก็ต่อเมื่อในนั้นมี page.tsx

$ npx next build          # หลักฐานที่หนักแน่นกว่า curl — Next.js พิมพ์รายการ route ออกมาเอง
✓ Compiled successfully

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /about
└ ○ /blog/hello           ← ไม่มี /blog และไม่มี /secret ในตารางนี้

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

เทียบกับ Gin ที่เพิ่งเรียนมา (บท 38)

// ปุ่มนับเลขที่วางไว้ใน layout · กดจนเลขเป็น 2 แล้วกดลิงก์ไปอีกหน้า
{ "path": "/about", "h1": "PAGE: /about",
  "counter": "layout counter = 2", "sameButtonNode": true }   ← ปุ่มก้อนเดิมในหน้าเว็บ

// แต่พอโหลดหน้าใหม่ทั้งหน้า (F5)
{ "path": "/about", "counter": "layout counter = 0" }          ← เริ่มจากศูนย์

4 · Server Component vs Client Component

ใน App Router ทุกไฟล์เป็น Server Component โดยปริยาย จนกว่าจะเขียน 'use client' บรรทัดบนสุด · เกินครึ่งของ error ในกลุ่มนี้คือเส้นแบ่งเส้นนี้เส้นเดียว

ต้องใส่ 'use client' เมื่อไหร่ และตรงไหน

import { useState } from 'react';
'use client';

Error: The "use client" directive must be
placed before other expressions.
Move it to the top of the file to resolve
this issue.
(+ error ตัวเดิมของ useState พ่วงมาด้วย = 2 errors)

'use client';

import { useState } from 'react';

✓ Compiled successfully
(ไม่มี error · route ของหน้านั้นขึ้นในตาราง Route ตามปกติ)

$ npx next build          # ไฟล์ที่ลืม 'use client' — ข้อความเต็ม ๆ ที่ได้จริง
> Build error occurred
Error: Turbopack build failed with 1 error:
./components/CustomerList.tsx:1:19
Error: You're importing a module that depends on `useState` into a React Server
Component module. This API is only available in Client Components. To fix, mark
the file (or its parent) with the `"use client"` directive.
  Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
> 1 | import { useMemo, useState, type ChangeEvent } from "react";
    |                   ^^^^^^^^
Import trace:
  Server Component:
   ./components/CustomerList.tsx       ← แปะ 'use client' ที่ไฟล์นี้ (ไฟล์ที่ import hook เข้ามาจริง)
   ./app/page.tsx                      ← ไม่ใช่ที่นี่ · นี่แค่หน้าที่บังเอิญเรียกมัน

อ่าน trace ให้ถูกทาง: ไฟล์ที่ต้องแก้คือไฟล์เดียวกับที่บรรทัดพาธใต้ Turbopack build failed ชี้อยู่ (./components/CustomerList.tsx:1:19) ซึ่งเป็นบรรทัดแรกของ Import trace · บรรทัดถัด ๆ ไปคือหน้าที่ลากมันเข้ามา ไม่ใช่ที่ที่ต้องแปะ — แปะที่นั่นก็หายพังเหมือนกัน แต่คุณเพิ่งลากทั้งหน้าไปเป็น client เพื่อแก้ปัญหาของไฟล์เดียว

5 · component + props + children + spread

component คือฟังก์ชันธรรมดาที่รับ argument ได้ตัวเดียว (object ก้อนเดียวชื่อ props) แล้วคืน JSX · ไม่มีอะไรพิเศษกว่าฟังก์ชันใน Go นอกจากข้อตกลงสองข้อนั้น

// components/Bases/Button.tsx — สไลด์หน้า 22 ทุกตัวอักษร
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

const Button = (props: ButtonProps) => {
	const { children, ...restProps } = props;
	return <button {...restProps}>{children}</button>;
};

export default Button;

ตัวอักษรตัวแรกของชื่อ component — กฎที่เปลี่ยนความหมายทั้งหมด

<Button>  ตัวใหญ่ → React อ่านว่า "เรียกฟังก์ชันชื่อ Button ที่อยู่ในไฟล์นี้"
<button>  ตัวเล็ก → React อ่านว่า "สร้างแท็ก HTML ชื่อ button"
                    ↑ ไม่สนใจเลยว่าคุณจะประกาศ const button ไว้ข้างบนหรือเปล่า

type ในไฟล์ barrel — กฎจริงคือ “ต้องมีอย่างน้อยหนึ่งที่”

เหตุผล: โปรเจกต์เปิด "isolatedModules": true ไว้ = ตัวแปลงต้องอ่านไฟล์นี้ไฟล์เดียวแล้วตัดสินใจให้ได้ ว่าบรรทัดไหนต้องลบทิ้ง โดยห้ามเปิดไฟล์อื่นไปดู · บอกไว้ที่ไหนที่หนึ่งก็พอ · แต่ให้เขียนทั้งสองที่ตามสไลด์ เพราะมันกันอนาคต ไม่ใช่เพราะ compiler บังคับ

6 · Tailwind — utility แปลกลับเป็น CSS

ไม่มีอะไรใหม่ให้เรียนเลยสักบรรทัด — ฝั่งขวาคือ CSS จากบท 59–62 ทั้งหมด สิ่งเดียวที่ต้องเรียนคือวิธีย่อ · ทุกก้อนในตารางนี้ก็อปมาจากไฟล์ CSS ที่โปรเจกต์สร้างขึ้นจริง

/* ก็อปจากไฟล์ CSS ที่โปรเจกต์สร้างจริง */
--spacing: .25rem;      ← 4 × 0.25rem = 1rem = 16px
--text-base: 1rem;      --text-sm: .875rem;
--radius-md: .375rem;   --radius-lg: .5rem;
--font-weight-bold: 700;
--color-red-500: #fb2c36;   --color-gray-900: #101828;

v3 vs v4 — โปรเจกต์นี้เป็น v4 แต่อินเทอร์เน็ตยังเป็น v3

const color = "blue";
<p className={`text-${color}-600`}>

# HTML — คลาสอยู่ครบ
class="text-blue-600"
# แต่ในไฟล์ CSS นับได้
text-blue-600  -> 0
# ไม่มี error · ไม่มี warning · HTTP 200

const colors = {
	blue:  "text-blue-600",
	green: "text-green-700",
};
<p className={colors[color]}>

text-green-700 -> 1
.text-green-700 { color: var(--color-green-700); }

สาเหตุ: Tailwind อ่านไฟล์ของคุณเป็นตัวอักษร ตอน build ตอนนั้นโปรแกรมยังไม่ได้รัน ตัวแปร color ยังไม่มีค่า · สิ่งที่มันเห็นคือข้อความ text-${color}-600 ซึ่งไม่ใช่ชื่อ utility → ไม่สร้างกฎอะไรเลย · ลำดับคลาสใน className ไม่มีความหมาย — สิ่งที่ตัดสินคือลำดับกฎในไฟล์ CSS ซึ่ง Tailwind เรียงให้เอง โดยเอา variant อย่าง hover: ไว้ท้ายเสมอ

7 · ตาราง hooks ทั้งห้า

useState — สองท่าที่ต้องเลือกให้ถูก

setCount(count + 1);
setCount(count + 1);
setCount(count + 1);

กด 1 ครั้ง -> Stale: 1     ไม่ใช่ 3
กด 2 ครั้ง -> Stale: 2     ไม่ใช่ 6

setCount((c) => c + 1);
setCount((c) => c + 1);
setCount((c) => c + 1);

กด 1 ครั้ง -> Updater: 3
กด 2 ครั้ง -> Updater: 6

อย่าเหมาเปลี่ยนทุกที่เป็น (c) => c + 1 เพราะกลัวผิด — ใช้แบบส่งฟังก์ชันเมื่อค่าใหม่คำนวณจากค่าเก่า (บวก ลบ สลับ true/false ต่อท้าย array) · ถ้าค่าใหม่ไม่เกี่ยวกับค่าเก่าเลย เช่น setName('Robin') หรือ setCount(0) ตอนรีเซ็ต — เขียนส่งค่าตรง ๆ อ่านง่ายกว่ามาก

// อ่าน state ต่อจาก set ในบรรทัดถัดไป — console จริง กด 1 ครั้ง
[log] name right after setName = Taylor      ← ยังเป็นค่าเก่า
[log] render with name = Robin               ← ค่าใหม่มาถึงในรอบวาดถัดไป

useEffect — cleanup รันตอนไหนบ้าง

สไลด์หน้า 41 เขียนไม่ครบ — เขียนว่า cleanup รันตอน unmount อย่างเดียว · ประโยคที่ถูกกว่าคือ “cleanup รันก่อน setup รอบถัดไปเสมอ และรันอีกครั้งตอน component หายไปจากหน้า”

useCallback / React.memo — ต้องมาคู่กัน ไม่งั้นได้ศูนย์

// พ่อมี onPing = useCallback(() => {}, []) → ก้อนเดิมตลอดแน่นอน · กด +1 สองครั้ง
[ChildPlain] วาดใหม่ครั้งที่ 3
[ChildPlain] วาดใหม่ครั้งที่ 4
[ChildPlain] วาดใหม่ครั้งที่ 5
[ChildPlain] วาดใหม่ครั้งที่ 6      ← ไม่ได้ห่อ memo → ไต่ต่อไปเรื่อย ๆ ทั้งที่ prop เป็นก้อนเดิมเป๊ะ

[ChildMemo]  วาดใหม่ครั้งที่ 2      ← ห่อ memo → หยุดตั้งแต่ตอนโหลดหน้า ไม่ขยับอีกเลย

useCallback ที่ลูกไม่ได้ห่อ React.memo คือโค้ดที่ไม่ทำอะไรเลย นอกจากทำให้ไฟล์ยาวขึ้น · และกลับกัน — ห่อ memo แต่ส่ง prop ที่เป็นก้อนใหม่ทุกครั้ง ก็ไม่เกิดผลเหมือนกัน

// next.config.ts — ทั้งไฟล์ ไม่ได้ตัดอะไรออก
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

$ ls node_modules | grep -i react-compiler
(ไม่มีอะไรออกมา)

8 · useContext — เช็คลิสต์ 6 ขั้น

createContext = ติดตั้งท่อ · <Provider value={…}> = เปิดวาล์วปล่อยน้ำเข้าท่อ · useContext = เปิดก๊อก · มันหยิบจาก Provider ตัวที่ใกล้ที่สุดที่อยู่เหนือจุดที่เรียก (ซ้อน Provider ได้ ตัวในสุดชนะ) และ Provider ที่ return ออกไปจาก component เดียวกับที่เรียก useContext จะไม่ถูกมองเห็น เพราะมันอยู่ “ใต้” ไม่ใช่ “เหนือ”

Provider เขียนได้สองแบบ · และ context ไม่ใช่ตัวแทนของ Redux

<Ctx.Provider value="แบบเก่า">…</Ctx.Provider>    ← ยังใช้ได้ ไม่ต้องรีบไล่แก้
<Ctx value="แบบใหม่ React 19">…</Ctx>              ← สั้นกว่า · ทั้งคู่ให้ HTTP 200 · ไม่มี warning

9 · custom hook — กฎ 4 ข้อ

custom hook คือฟังก์ชัน JavaScript ธรรมดาที่ชื่อขึ้นต้นด้วย use และข้างในเรียก hook ของ React · ไม่มี API พิเศษ ไม่ต้อง import อะไรเพิ่ม

// กฎข้อ 4 — Box ตัวเดียว เรียก useCounter(0) ข้างใน แล้ววางสองครั้ง
// กด A สามครั้ง · กด B หนึ่งครั้ง → ผลจริงบนจอ:
A = 3      B = 1        ← ไม่ใช่ 4 ทั้งคู่ และไม่ใช่ 3 ทั้งคู่

React ผูก state ไว้กับ "ตำแหน่งของ component ในต้นไม้" ไม่ได้ผูกไว้กับ "ฟังก์ชัน useCounter"
→ วาง Box กี่ตัว ก็ได้ช่องเก็บค่าเท่านั้นตัว

custom hook ไม่ใช่เครื่องมือแชร์ค่า มันคือเครื่องมือแชร์ วิธีทำ · อยากให้หลาย component เห็นค่าเดียวกัน ต้องยก state ขึ้นไปที่พ่อแม่ร่วมแล้วส่งลงมาเป็น prop หรือใช้ useContext · ท่ามาตรฐานคือใช้ทั้งคู่ — Context เก็บค่ากลาง แล้วห่อการอ่านค่านั้นไว้ใน custom hook ชื่อ useXxx

import { useEffect, useState } from "react";

export function useDebounce<T>(value: T, delay: number): T {
	const [debounced, setDebounced] = useState(value);

	useEffect(() => {
		const id = setTimeout(() => setDebounced(value), delay);
		return () => clearTimeout(id);   // ← ทั้งหมดของ debounce
	}, [value, delay]);

	return debounced;
}

import { useCallback, useState } from "react";

export function useToggle(initial = false) {
	const [isOpen, setIsOpen] = useState(initial);
	const open   = useCallback(() => setIsOpen(true), []);
	const close  = useCallback(() => setIsOpen(false), []);
	const toggle = useCallback(() => setIsOpen((v) => !v), []);
	return { isOpen, open, close, toggle };
}

10 · ตารางแปล error ที่เจอบ่อย

Turbopack / Next.js — พังตอน next build

TypeScript — จาก npx tsc --noEmit

React — ตอนรันในเบราว์เซอร์

ESLint — npx eslint app components

11 · ตารางกับดักรวมทั้งกลุ่ม

12 · อ้างอิง

• Next.js — 'use client' directive — ลิงก์นี้ Next.js พิมพ์ให้เองในข้อความ error ตอน build · อ่านหัวข้อ How "use client" works ให้เห็นว่ามันแบ่งโปรเจกต์เป็นสองฝั่งยังไง และ Nesting Client Components within Server Components ที่อธิบายว่าทำไมต้องแปะให้ใกล้ใบ ไม่ใช่แปะไว้บนสุด
• Next.js — Installation · Project Structure — หน้าแรกอ่านแค่ Automatic installation จะเห็นว่าเอกสารทางการใช้ npx create-next-app@latest (ขีดกลาง) ทุกที่ · หน้าหลังดูตาราง Routing Files ที่ลิสต์ชื่อไฟล์พิเศษทั้งหมดที่ Next.js จองไว้ (page · layout · loading · error · not-found …)
• Next.js — layout.js — อ่านหัวข้อ Good to know ให้จบ มีข้อที่หัวข้อ 3 ของหน้านี้พิสูจน์ไว้แล้วสองข้อ และอีกข้อที่ยังไม่แตะ: layout รับ searchParams ไม่ได้ — จำไว้ เดี๋ยวจะไปงงตอนทำฟิลเตอร์
• React — useState · State as a Snapshot · Queueing a Series of State Updates — อ่าน Caveats ของ set function ที่เขียนตรง ๆ ว่ามันไม่เปลี่ยนค่าในโค้ดที่กำลังรันอยู่ · แล้วดูตารางไล่คิวทีละบรรทัด จะเห็นชัดว่าทำไม setNumber(number + 1) สามครั้งได้ +1 แต่ setNumber(n => n + 1) ได้ +3
• React — useEffect · Synchronizing with Effects · You Might Not Need an Effect — หน้าแรกอ่าน Parameters ตรงที่บอกว่า React เทียบ dependency ด้วย Object.is · หน้าที่สองอ่าน How to handle the Effect firing twice in development? · หน้าที่สาม ESLint แปะลิงก์มาให้เองในข้อความ error — เริ่มที่ Updating state based on props or state
• React — useMemo · useCallback · memo — อ่าน Should you add useMemo everywhere? ซึ่งทีม React เขียนเองเพื่อบอกว่าอย่า · ในหน้า useCallback มีบรรทัดที่บอกว่า useCallback(fn, deps) เท่ากับ useMemo(() => fn, deps) · ในหน้า memo อ่าน Caveats ข้อที่บอกว่า memo ไม่กัน re-render ที่เกิดจาก context
• React — useContext · createContext · Passing Data Deeply with Context — อ่าน Caveats ที่บอกว่า Provider ที่ return จาก component เดียวกันจะไม่ถูกมองเห็น · Optimizing re-renders when passing objects and functions คือหัวข้อ 8 ขั้นที่ 5 ของหน้านี้ · และ Before you use context ที่แนะนำให้ลองสองทางก่อนเสมอ
• React — Reusing Logic with Custom Hooks · Rules of Hooks — อ่านหัวข้อ Custom Hooks share stateful logic, not state itself ซึ่งตอบกฎข้อ 4 โดยตรง · หน้าหลังคือลิงก์เดียวกับที่ React พิมพ์ใน error ตอนหน้าพัง
• React — Your First Component · Passing Props to a Component · Rendering Lists — ดูกล่อง Pitfall เรื่องชื่อ component ต้องขึ้นต้นด้วยตัวใหญ่ · Forwarding props with the JSX spread syntax (คือ {...restProps} เป๊ะ ๆ · คู่มือเตือนเองว่า “ใช้ให้เท่าที่จำเป็น”) · และ Why does React need keys?
• React 19 Upgrade Guide — อ่านหัวข้อ The JSX namespace in TypeScript · เป็นเอกสารต้นทางของ TS2503
• Tailwind CSS — Detecting classes in source files · Theme variables · Upgrade guide (v3 → v4) — หน้าแรกอ่าน Dynamic class names ซึ่งเป็นเอกสารทางการของกับดักชื่อคลาสจากตัวแปร · หน้าที่สองดูตาราง Theme variable namespaces ที่ใช้แทน tailwind.config.js ของ v3 · หน้าที่สามอ่าน CSS-first configuration ตอนที่ค้นเจอบทความเก่าแล้วไม่แน่ใจว่าต้องแปลงอะไร
• MDN — Object.is() · String.prototype.toLocaleLowerCase() — อันแรกคือฟังก์ชันที่ React ใช้เทียบ dependency ทีละช่อง — สังเกตว่ามันไม่มีทางบอกได้ว่า object สองก้อน “หน้าตาเหมือนกัน” · อันที่สองดูตัวอย่าง 'İ' กับ locale tr ที่ทำให้ผลต่างจาก toLowerCase()
• npm Docs — npm init — อ่านย่อหน้า Description ที่บอกว่า npm create เป็นชื่อเล่นของ npm init · ต้นตอทั้งหมดของกับดักในหัวข้อ 1 · อ่านแล้วจะเดาได้เองว่าทำไม npm create vite@latest ถึงต้องเว้นวรรคเหมือนกัน
• Cheat sheet — TypeScript (บท 63–68) — type vs interface · any vs unknown · map/filter/reduce · ตารางแปล error ของ tsc · เปิดคู่กับหน้านี้เวลาเจอ TSxxxx ที่ไม่ได้อยู่ในหัวข้อ 10