โจทย์หน้า All Recipes — mock data แล้วแยก container

Next.js           v16.3.5   # npx next --version
react             19.2.8    # require('react/package.json').version
typescript        5.9.3
tailwindcss       4.3.3
@base-ui/react    1.8.0
eslint            9.39.5
node              v24.14.0

โจทย์จากสไลด์ — หน้าที่ต้องได้

สไลด์หน้า 47 โชว์หน้าเว็บที่ localhost:3000/recipes ใต้ Navbar จากบทก่อน ๆ มีหัวข้อ All Recipes · บรรทัดรองสีเทา · แล้วเป็นตารางการ์ด 4 คอลัมน์ ทุกใบหน้าตาเหมือนกัน: รูปหมวกเชฟ · recipe 1, recipe 2, … · เจ้าของ JD john doe · ป้าย Easy

หน้า 50 คือผลสุดท้ายหลัง refactor: หน้าตาเดิมทุกอย่าง แต่การ์ดกลายเป็นเมนูจริง — Classic Creamy Carbonara (Chef Marco · Medium) · Avocado Toast with Poached Egg (Sarah Jenkins · Easy) · Beef Wellington (Gordon Ramsey Style · Hard) · Spicy Thai Basil Chicken (Pad Krapow) (Noy Somchai · Easy) · French Macarons (Chloe Dubois · Hard) · Mediterranean Chickpea Salad (Elena Rostova · Easy) · Homemade Tonkotsu Ramen (Kenji Sato · Hard) · Mushroom Risotto (Chef Marco · Medium) — และยังมีแถวที่ 3 โผล่ขอบล่าง แปลว่าข้อมูลจริงในสไลด์มีมากกว่า 8 ใบ แต่อ่านชื่อได้แค่ 8 ใบ

จังหวะที่ 1 — วางการ์ดปลอม 12 ใบ (สไลด์หน้า 48)

งานแรกยังไม่ต้องมีข้อมูลจริง แค่อยากเห็นว่าตารางกับการ์ดวางตัวถูกไหม สไลด์ใช้ท่า “สร้าง array เปล่า 12 ช่อง แล้ว map ออกมาเป็นการ์ด”:

// app/recipes/page.tsx — ถอดจากสไลด์หน้า 48 ทุกตัวอักษร
import { Container } from "@/components/Bases";
import RecipeCard from "@/components/RecipeCard";

const RecipesPage = () => {
  return (
    <div className="pt-10 pb-8">
      <Container>
        <p className="wongnok-text-h2">All Recipes</p>
        <p className="wongnok-text-body text-muted-foreground mt-2">
          8 recipes from home cooks · page 1 of 7
        </p>
        <div className="grid grid-cols-4 gap-4 mt-7">
          {Array.from({ length: 12 }).map((_, index) => (
            <RecipeCard
              key={`recipe-${index}`}
              name={`recipe ${index + 1}`}
              level="EASY"
              owner={{ name: "john doe" }}
            />
          ))}
        </div>
      </Container>
    </div>
  );
};

export default RecipesPage;

build ผ่าน · หน้าเป็น ○ (Static) · curl หน้า /recipes-v1 (ชื่อ route ที่ผมใช้เก็บเวอร์ชันหน้า 48 ไว้เทียบ) แล้วนับได้การ์ด 12 ใบจริง:

$ curl -s http://localhost:385/recipes-v1 | grep -o 'recipe [0-9]*<' | wc -l
      12
$ curl -s http://localhost:385/recipes-v1 | grep -o '8 recipes from home cooks[^<]*' | head -1
8 recipes from home cooks · page 1 of 7

// ทำไมสไลด์ต้องเขียน Array.from({ length: 12 })
// ไม่เขียน new Array(12) ซึ่งสั้นกว่า?
console.log(Array.from({ length: 3 }));
console.log(Array.from({ length: 3 }).map((_, index) => `recipe ${index + 1}`));
console.log(new Array(3).map((_, index) => `recipe ${index + 1}`));

[ undefined, undefined, undefined ]
[ 'recipe 1', 'recipe 2', 'recipe 3' ]
[ <3 empty items> ]

สามอย่างในหน้า 48 ที่ติดมาถึงหน้า 50

จังหวะที่ 2 — แยกรายการออกเป็น container (สไลด์หน้า 49)

สไลด์หน้า 49 เขียนเหตุผลไว้หนึ่งบรรทัด: “Split recipe list into container to handle business of recipe list”
คำว่า container ย้อนกลับไปที่สไลด์หน้า 8 ซึ่งแบ่งโฟลเดอร์ไว้สองแบบ:

โค้ดหน้า 49 มีสองก้อน · ผมวางไฟล์ตามโครงหน้า 8 (containers/RecipeList/RecipeList.tsx + index.ts) — สไลด์ไม่ได้บอกชื่อไฟล์ของ RecipeList ไว้ บอกแค่ว่ามันอยู่โฟลเดอร์เดียวกับ ./recipes

// containers/RecipeList/RecipeList.tsx — ถอดจากสไลด์หน้า 49 (ก้อนขวา) ทุกตัวอักษร
"use client";

import RecipeCard from "@/components/RecipeCard";
import { RECIPES_MOCK_DATA } from "./recipes";

const RecipeList = () => {
  return (
    <>
      {RECIPES_MOCK_DATA.map((recipe) => (
        <RecipeCard
          key={recipe.id}
          name={recipe.name}
          level={recipe.level}
          imageUrl={recipe.imageUrl}
          owner={recipe.owner}
        />
      ))}
    </>
  );
};

export default RecipeList;

// app/recipes/page.tsx — ส่วน JSX ตามสไลด์หน้า 49 (ก้อนซ้าย) · บรรทัด import ผมเติมเอง
import { Container } from "@/components/Bases";
import RecipeList from "@/containers/RecipeList";

const RecipesPage = () => {
  return (
    <div className="pt-10 pb-8">
      <Container>
        <p className="wongnok-text-h2">All Recipes</p>
        <p className="wongnok-text-body text-muted-foreground mt-2">
          8 recipes from home cooks · page 1 of 7
        </p>
        <div className="grid grid-cols-4 gap-4 mt-7">
          <RecipeList />
        </div>
      </Container>
    </div>
  );
};

export default RecipesPage;

// containers/RecipeList/recipes.ts — สไลด์ไม่ได้โชว์ไฟล์นี้ ผมเขียนจากภาพหน้า 50
import type { RecipeLevel, RecipeOwner } from "@/components/RecipeCard";

export type Recipe = {
  id: string;
  name: string;
  level: RecipeLevel;          // "EASY" | "MEDIUM" | "HARD"
  imageUrl?: string;
  owner: RecipeOwner;          // { name: string; imageUrl?: string }
};

export const RECIPES_MOCK_DATA: Recipe[] = [
  { id: "r001", name: "Classic Creamy Carbonara", level: "MEDIUM", owner: { name: "Chef Marco" } },
  { id: "r002", name: "Avocado Toast with Poached Egg", level: "EASY", owner: { name: "Sarah Jenkins" } },
  { id: "r003", name: "Beef Wellington", level: "HARD", owner: { name: "Gordon Ramsey Style" } },
  // … r004 Pad Krapow · r005 French Macarons · r006 Chickpea Salad
  // … r007 Tonkotsu Ramen · r008 Mushroom Risotto
];

ตัวแทน Container กับ RecipeCard ที่ผมใช้ตรวจ (ไม่ใช่โค้ดจากสไลด์ · ตัวเลขขนาดไฟล์ในหัวข้อ "use client" ข้างล่างวัดจากตัวแทนชุดนี้ ถ้า RecipeCard ของคุณต่างไป ตัวเลขจะต่างตาม):

// components/Bases/index.tsx — ตัวแทน
export const Container = ({ children }: { children: React.ReactNode }) => (
  <div className="mx-auto max-w-7xl px-4">{children}</div>
);

// components/RecipeCard/RecipeCard.tsx — ตัวแทน (index.ts export default + type ต่อ)
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export type RecipeLevel = "EASY" | "MEDIUM" | "HARD";
export type RecipeOwner = { name: string; imageUrl?: string };

type RecipeCardProps = { name: string; level: RecipeLevel; imageUrl?: string; owner: RecipeOwner };

const RecipeCard = ({ name, level, imageUrl, owner }: RecipeCardProps) => {
  return (
    <Card className="pt-0">
      <div className="aspect-[4/3] bg-muted">{imageUrl ? null : "no photo"}</div>
      <CardHeader>
        <CardTitle>{name}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{owner.name}</p>
        <Badge variant="secondary">{level}</Badge>
      </CardContent>
    </Card>
  );
};

export default RecipeCard;

ผลรัน: build ผ่าน · tsc และ eslint exit code 0 · curl หน้า /recipes เจอการ์ด 8 ใบ ชื่อเมนูตรงกับหน้า 50

$ npx next build
Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /recipes
└ ○ /recipes-v1

○  (Static)  prerendered as static content

key — ทำไมหน้า 49 เปลี่ยนจาก index เป็น recipe.id

key คือป้ายชื่อที่ React ใช้จำว่าการ์ดใบไหนคือใบเดิมจากรอบก่อน
เริ่มจากกรณีที่ลืมใส่เลย · ผมลบบรรทัด key ออกจากทั้งสองเวอร์ชัน (หน้า 48 ที่เป็น server component → route /nokey · หน้า 49 ที่ติด "use client" → route /nokey-client ซึ่งตอนนั้นผมวางไฟล์ไว้ที่ components/RecipeListNoKey/) แล้ว curl ทีละหน้า · build ผ่านทั้งคู่ แต่ log ของ next dev ออกมาแบบนี้:

 GET /recipes 200 in 170ms (next.js: 145ms, application-code: 25ms)
Each child in a list should have a unique "key" prop. See https://react.dev/link/warning-keys for more information.
 GET /nokey 200 in 125ms (next.js: 98ms, application-code: 27ms)
Each child in a list should have a unique "key" prop.

Check the render method of `RecipeList`. See https://react.dev/link/warning-keys for more information.
 GET /nokey-client 200 in 85ms (next.js: 71ms, application-code: 14ms)

อ่าน log นี้ให้เป็น: ข้อความ warning ขึ้นก่อนบรรทัด GET ของหน้าที่ทำให้เกิด (หน้า /recipes ที่มี key ครบไม่มี warning) · เวอร์ชัน client บอกชื่อ component ให้ด้วย (Check the render method of `RecipeList`) ส่วนเวอร์ชัน server ไม่บอก · และ eslint จับได้ทั้งคู่เป็น error (ผมตัด path เต็มของเครื่องที่ใช้ตรวจออกเป็น ...):

$ npx eslint app/nokey components/RecipeListNoKey
.../app/nokey/page.tsx
  14:13  error  Missing "key" prop for element in iterator  react/jsx-key

.../components/RecipeListNoKey/index.tsx
  10:9  error  Missing "key" prop for element in iterator  react/jsx-key

✖ 2 problems (2 errors, 0 warnings)

ลืมใส่มีคนฟ้อง · ใส่เป็น index ไม่มีใครฟ้องเลย — นั่นคือเหตุผลที่ข้อถัดไปอันตรายกว่า
ผมทำหน้าทดลองหนึ่งหน้า: แต่ละแถวมีปุ่มหัวใจที่เก็บ useState ของตัวเอง (ตรงกับ “Is favorite?” ในสไลด์หน้า 45) · วางรายการเดียวกันสองชุด ชุดบนใช้ key จาก index ชุดล่างใช้ key จาก id · มีปุ่ม remove first ลบเมนูแรกออกจากทั้งสองชุดพร้อมกัน

// ส่วนสำคัญของหน้าทดลอง (ไฟล์เต็มมี "use client" + import useState)
const FavoriteRow = ({ name }: { name: string }) => {
  const [isFavorite, setIsFavorite] = useState(false);
  return (
    <li>
      <button onClick={() => setIsFavorite(!isFavorite)}>
        {isFavorite ? "♥" : "♡"} {name}
      </button>
    </li>
  );
};

// ชุดบน
{recipes.map((recipe, index) => <FavoriteRow key={`recipe-${index}`} name={recipe.name} />)}
// ชุดล่าง
{recipes.map((recipe) => <FavoriteRow key={recipe.id} name={recipe.name} />)}

// ปุ่ม remove first
<button onClick={() => setRecipes(recipes.slice(1))}>remove first</button>

// ขั้นที่ 1: กดหัวใจ Carbonara ทั้งสองชุด
key=index                          key=id
♥ Classic Creamy Carbonara         ♥ Classic Creamy Carbonara
♡ Avocado Toast with Poached Egg   ♡ Avocado Toast with Poached Egg
♡ Beef Wellington                  ♡ Beef Wellington

// ขั้นที่ 2: กด remove first → Carbonara หายไปจากทั้งสองชุด

remove first
key=index
♥ Avocado Toast with Poached Egg
♡ Beef Wellington
key=id
♡ Avocado Toast with Poached Egg
♡ Beef Wellington

"use client" ใน RecipeList — จำเป็นไหม

RecipeList หน้า 49 ไม่มี useState · ไม่มี useEffect · ไม่มี onClick · มีแค่ .map() ข้อมูลที่ import มา
ใน บท 78 เราเห็นแล้วว่า ลืม "use client" ในไฟล์ที่มี hook → build พัง · คำถามกลับด้าน: ใส่ในไฟล์ที่ไม่มี hook เลย จะเกิดอะไร
อย่าเดา · ผม build ทั้งสองแบบ (ลบ .next ทิ้งก่อนทุกครั้ง) แล้ววัดของที่ต่างกันจริง

// แบบ A — ตามสไลด์หน้า 49
"use client";
import RecipeCard from "@/components/RecipeCard";
import { RECIPES_MOCK_DATA } from "./recipes";

// แบบ B — ลบสองบรรทัดแรกทิ้ง ที่เหลือเหมือนเดิมทุกตัวอักษร
import RecipeCard from "@/components/RecipeCard";
import { RECIPES_MOCK_DATA } from "./recipes";

A html=21153 html_gz=3222 js_files=7 js=599772 js_gz=186078 total_gz=189300 ['static/chunks/1ltawcz6gcos9.js'] html_hits 1
B html=37091 html_gz=3775 js_files=7 js=565979 js_gz=172654 total_gz=176429 [] html_hits 2

$ f=$(grep -rl "Mushroom Risotto" .next/static/chunks)
$ ls -l $f | awk '{print $5}'      # ขนาดไฟล์เป็นไบต์
34057
$ gzip -c $f | wc -c
   13671
$ grep -o 'Classic Creamy Carbonara\|Gordon Ramsey Style\|base-ui\|no photo' $f | sort | uniq -c
   1 Classic Creamy Carbonara
   1 Gordon Ramsey Style
   1 base-ui
   1 no photo

# A = card server · list client (ตามสไลด์)   B = card server · list server
# C = card client · list server              D = card client · list client
A html=21153 html_gz=3223 js_files=7 js=599772 js_gz=186078 total_gz=189301 ['static/chunks/1ltawcz6gcos9.js'] html_hits 1
B html=37091 html_gz=3775 js_files=7 js=565979 js_gz=172654 total_gz=176429 [] html_hits 2
C html=22333 html_gz=3380 js_files=7 js=598834 js_gz=185664 total_gz=189044 [] html_hits 2
D html=21153 html_gz=3221 js_files=7 js=599738 js_gz=186066 total_gz=189287 ['static/chunks/3t8oefhj0iumv.js'] html_hits 1

ทำให้ตาราง responsive

Tailwind เขียนแบบ mobile-first: class ที่ไม่มี prefix ใช้กับทุกจอ · sm: ใช้ตั้งแต่จอกว้างขึ้นไป · lg: ใช้ตั้งแต่จอที่กว้างกว่านั้น (ทบทวนได้ใน บท 72)

<div className="grid grid-cols-4 gap-4 mt-7">

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-7">

ขอบของ sm กับ lg อยู่ที่เท่าไหร่ — ไม่ต้องจำ ดูจาก CSS ที่ build ออกมาจริง:

$ grep -o '@media[^{]*{[^{]*sm\\:grid-cols-2' .next/static/chunks/*.css
@media (min-width:40rem){.sm\:grid-cols-2
$ grep -o '@media[^{]*{[^{]*lg\\:grid-cols-4' .next/static/chunks/*.css
@media (min-width:64rem){.lg\:grid-cols-4

40rem = 640px · 64rem = 1024px (1rem = 16px ตามค่าเริ่มต้นของ browser) · จอกว้าง 375px ได้ 1 คอลัมน์ · 700px ได้ 2 · 1280px ได้ 4

ภารกิจ — ต่อสถานะ Loading / Empty เข้ากับหน้านี้

สไลด์หน้า 42–43 ออกแบบหน้า All Recipes ไว้ 4 สถานะ (Default · Empty · Loading · Error) และ บท 84 ทำ RecipeListState ไว้เป็น union ที่มีป้าย status แล้ว (ไม่ใช้ตัวแปรแยก isLoading / error เพราะมันเปิดช่องให้เกิดสถานะที่เป็นไปไม่ได้) · แต่ RecipeList ในหน้า 49 ทำได้แค่ Default เพราะมันดึงข้อมูลเองจากไฟล์ mock ตรง ๆ ไม่มีทางบอกมันว่า “กำลังโหลด” หรือ “ค้นไม่เจอ”

// containers/RecipeList/RecipeList.tsx
import Link from "next/link";
import RecipeCard from "@/components/RecipeCard";
import { Skeleton } from "@/components/ui/skeleton";
import type { Recipe } from "./recipes";

export type RecipeListState =
  | { status: "loading" }
  | { status: "error"; message: string }
  | { status: "success"; recipes: Recipe[] };

const RecipeList = ({ state }: { state: RecipeListState }) => {
  if (state.status === "loading") {
    return (
      <>
        {Array.from({ length: 8 }).map((_, index) => (
          <Skeleton key={`skeleton-${index}`} className="aspect-[4/3] w-full" />
        ))}
      </>
    );
  }

  if (state.status === "error") {
    return (
      <div role="alert" className="col-span-full py-16 text-center">
        <p className="font-medium">Something went wrong</p>
        <p className="text-muted-foreground">{state.message}</p>
      </div>
    );
  }

  if (state.recipes.length === 0) {
    return (
      <div className="col-span-full py-16 text-center">
        <p className="font-medium">No recipes match your search</p>
        <Link href="/recipes" className="text-primary underline">
          Clear filters
        </Link>
      </div>
    );
  }

  return (
    <>
      {state.recipes.map((recipe) => (
        <RecipeCard
          key={recipe.id}
          name={recipe.name}
          level={recipe.level}
          imageUrl={recipe.imageUrl}
          owner={recipe.owner}
        />
      ))}
    </>
  );
};

export default RecipeList;

// containers/RecipeList/index.ts
export { default } from "./RecipeList";
export type { RecipeListState } from "./RecipeList";

// app/recipes/page.tsx
import { Container } from "@/components/Bases";
import RecipeList, { type RecipeListState } from "@/containers/RecipeList";
import { RECIPES_MOCK_DATA } from "@/containers/RecipeList/recipes";

const subtitle = (state: RecipeListState) => {
  if (state.status === "loading") return "Loading recipes…";
  if (state.status === "error") return "Could not load recipes";
  return `${state.recipes.length} recipes found`;
};

const RecipesPage = () => {
  const state: RecipeListState = { status: "success", recipes: RECIPES_MOCK_DATA };

  return (
    <div className="pt-10 pb-8">
      <Container>
        <p className="wongnok-text-h2">All Recipes</p>
        <p className="wongnok-text-body text-muted-foreground mt-2">{subtitle(state)}</p>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-7">
          <RecipeList state={state} />
        </div>
      </Container>
    </div>
  );
};

export default RecipesPage;

$ diff app/recipes/page.tsx app/recipes-empty/page.tsx
3d2
< import { RECIPES_MOCK_DATA } from "@/containers/RecipeList/recipes";
12c11
<   const state: RecipeListState = { status: "success", recipes: RECIPES_MOCK_DATA };
---
>   const state: RecipeListState = { status: "success", recipes: [] };
$ diff app/recipes/page.tsx app/recipes-loading/page.tsx
3d2
< import { RECIPES_MOCK_DATA } from "@/containers/RecipeList/recipes";
12c11
<   const state: RecipeListState = { status: "success", recipes: RECIPES_MOCK_DATA };
---
>   const state: RecipeListState = { status: "loading" };

$ npx next build
Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /recipes
├ ○ /recipes-empty
├ ○ /recipes-loading
└ ○ /recipes-v1

○  (Static)  prerendered as static content

$ npx tsc --noEmit; echo "tsc rc=$?"
tsc rc=0
$ npx eslint components containers app; echo "eslint rc=$?"
eslint rc=0

--- /recipes
card 8 skeleton 0
['8 recipes found']
[]
--- /recipes-empty
card 0 skeleton 0
['0 recipes found']
['No recipes match your search', 'Clear filters']
--- /recipes-loading
card 0 skeleton 8
['Loading recipes…']
[]

Recap ทั้งกลุ่ม Next.js App — บท 79 ถึง 85

สไลด์ชุดนี้แบ่ง agenda ไว้ในหน้า 3 เป็นห้าช่วง (ช่วงที่ 5 “Recap” ไม่มีหน้าสไลด์จริง จบที่หน้า 50) · ตารางนี้จับคู่ช่วงของสไลด์กับบทเรียนในกลุ่มนี้

ลองตอบดู

ถามกลับได้เลย

ถ้าคุณวาง RecipeList ไว้ที่อื่น (เช่นใน app/recipes/ ข้างหน้า page ตามเคล็ดลับหน้า 8 ที่บอกว่า component ใน app/ ใช้แค่ในหน้านั้น) — ไม่ผิด เอามาคุยกันได้ว่าเลือกเพราะอะไร
ถ้าวัดขนาด JS ของโปรเจกต์คุณเองแล้วได้ตัวเลขต่างจากในบทนี้ นั่นปกติ เพราะ RecipeCard ของแต่ละคนไม่เหมือนกัน — เอาตัวเลขทั้งสองแบบมาเทียบให้ดู · และถ้าอยากทำสถานะ Error ต่อ ให้ถามก่อนว่า “error มาจากไหน” เพราะตอนนี้ข้อมูลยังเป็น mock ที่พังไม่เป็น

อ้างอิง

• React — Rendering Lists — อ่านหัวข้อ Why does React need keys? และกล่อง Pitfall ที่พูดถึงการใช้ index เป็น key ตรงกับผลการทดลองกดหัวใจในบทนี้
• React — Preserving and Resetting State — อ่านหัวข้อ State is tied to a position in the render tree อธิบายว่าทำไม state หัวใจ “ติดตำแหน่ง” เมื่อ key ผูกกับ index
• Next.js — Server and Client Components — อ่านหัวข้อ When to use Server and Client Components? และ Reducing JS bundle size เป็นหลักการเดียวกับที่ผลวัดขนาด JS ในบทนี้ยืนยัน
• Tailwind CSS — Responsive design — อ่านตาราง breakpoint ในหัวข้อ Overview และหัวข้อ Working mobile-first ยืนยันค่า sm = 40rem · lg = 64rem
• MDN — Array.from() — อ่านหัวข้อ Using arrow functions and Array.from() และ Sequence generator (range) ที่ใช้ { length: 5 } ที่มาของท่า Array.from({ length: 12 }) ในสไลด์หน้า 48