โครงโฟลเดอร์ของแอปจริง — components กับ containers ต่างกันยังไง

# เวอร์ชันจริงบนเครื่องที่ใช้ตรวจ (อ่านจาก node_modules)
next        16.3.5
react       19.2.8
typescript  5.9.3
node        v24.14.0

1 · app/ — สไลด์หน้า 7 และจุดที่ลอกตามตรง ๆ ไม่ได้

สไลด์หน้า 7 สรุปของใน app/ ไว้สี่บรรทัด แปลเป็นภาษาคนได้แบบนี้:

เรื่อง page.tsx กับ layout.tsx บทเรียน 70 รันให้ดูละเอียดแล้ว บทนี้จะไม่พูดซ้ำ · แต่ในรูปต้นไม้ของสไลด์หน้า 7 มีบรรทัดหนึ่งที่ต้องหยุดดู:

app/
├── layout.tsx
├── page.tsx
├── globals.css
└── [another-routes]/     ← สไลด์หน้า 7 บรรทัดที่ 6
    └── page.tsx

// app/[another-routes]/page.tsx — ใน Next.js 16 params เป็น Promise ต้อง await ก่อน
export default async function Page({
  params,
}: {
  params: Promise<{ "another-routes": string }>;
}) {
  const p = await params;
  return <p>dynamic: {p["another-routes"]}</p>;
}

Route (app)
┌ ○ /
├ ○ /_not-found
├ ƒ /[another-routes]
└ ○ /components

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

$ curl -s http://localhost:379/recipes
<p>dynamic: <!-- -->recipes</p>
$ curl -s http://localhost:379/widgets
<p>dynamic: <!-- -->widgets</p>

อีกสองจุดเล็ก ๆ ที่ต่างจากสไลด์: โปรเจกต์ที่ create-next-app สร้างให้บนเครื่องตรวจได้ next.config.ts (ไม่ใช่ .js — ภาพ VS Code ในสไลด์หน้า 6 ก็เป็น .ts) · และไม่มีไฟล์ .env / .env.local มาให้ — สไลด์วาดไว้เพื่อบอกว่า "ถ้ามีจะอยู่ระดับบนสุด" คุณสร้างเองเมื่อต้องใช้

2 · components/ กับ containers/ — ใครวาด ใครคิด

สไลด์หน้า 8 เพิ่มโฟลเดอร์ระดับบนสุดอีกสองอัน · Next.js ไม่รู้จักชื่อทั้งสองนี้เลย มันเป็นข้อตกลงของทีม ไม่ใช่กฎของ framework · คำอธิบายในสไลด์คือ:

• components/ — pure and presentational of component
• containers/ — Stateful composition of components by business requirement

ต้นไม้ในสไลด์หน้า 8 (ชื่อ ComponentA–D เป็นชื่อสมมติของสไลด์):

.
├── app/
│   ├── _components/
│   │   └── ComponentC.tsx      ← ใช้แค่หน้านี้ (หัวข้อ 4)
│   ├── _containers/
│   │   └── ContainerD.tsx
│   └── page.tsx
├── components/
│   └── ComponentA/            ← หนึ่งโฟลเดอร์ต่อหนึ่งตัว
│       ├── ComponentA.tsx
│       └── index.ts
└── containers/
    └── ContainerB/
        ├── ContainerB.tsx
        └── index.ts

แปลเป็นภาษาคน:

• component = ชิ้นส่วนที่ได้อะไรมาก็วาดตามนั้น · ไม่จำอะไรเอง ไม่รู้ว่าข้อมูลมาจากไหน ไม่รู้ว่าแอปนี้ทำธุรกิจอะไร · ส่ง props เหมือนเดิมเข้าไปกี่ครั้งก็ได้หน้าตาเหมือนเดิมทุกครั้ง (นี่คือคำว่า pure)
• container = ชิ้นส่วนที่จำสถานะเอง (มี useState ฯลฯ) และรู้ว่างานนี้ต้องการอะไร — เช่น "หน้ารายการสูตรต้องกรองได้ว่าเฉพาะเมนูเร็ว" · แล้วหยิบ component หลาย ๆ ตัวมาประกอบกันให้ได้หน้าตาตาม requirement นั้น

ของจริงในโปรเจกต์ตรวจ — ตามโครงของสไลด์หน้า 8 เป๊ะ (โฟลเดอร์ต่อหนึ่งตัว + index.ts):

// components/RecipeCard/RecipeCard.tsx — pure: ไม่มี state ไม่รู้ว่าข้อมูลมาจากไหน
export type RecipeCardProps = {
  name: string;
  minutes: number;
};

const RecipeCard = ({ name, minutes }: RecipeCardProps) => {
  return (
    <article className="rounded border p-3">
      <h3>{name}</h3>
      <p>{minutes} นาที</p>
    </article>
  );
};

export default RecipeCard;

// containers/RecipeList/RecipeList.tsx — stateful: จำว่ากดกรองอยู่ไหม + รู้กติกาธุรกิจ
"use client";

import { useState } from "react";
import { RecipeCard } from "@/components/RecipeCard";

const recipes = [
  { id: 1, name: "ข้าวผัดกะเพรา", minutes: 15 },
  { id: 2, name: "ต้มยำกุ้ง", minutes: 30 },
  { id: 3, name: "ไข่เจียว", minutes: 5 },
];

const RecipeList = () => {
  const [quickOnly, setQuickOnly] = useState(false);
  const shown = quickOnly ? recipes.filter((r) => r.minutes <= 15) : recipes;

  return (
    <section>
      <button onClick={() => setQuickOnly(!quickOnly)}>
        {quickOnly ? "แสดงทั้งหมด" : "เฉพาะเมนูไม่เกิน 15 นาที"}
      </button>
      {shown.map((r) => (
        <RecipeCard key={r.id} name={r.name} minutes={r.minutes} />
      ))}
    </section>
  );
};

export default RecipeList;

index.ts ของทั้งสองโฟลเดอร์เป็น barrel แบบเดียวกับบทเรียน 71 · ส่วนแบนเนอร์ที่มีแค่หน้าแรกวางไว้ใน app/_components/ (หัวข้อ 4 อธิบายว่าทำไม):

// components/RecipeCard/index.ts  (containers/RecipeList/index.ts เหมือนกัน เปลี่ยนแค่ชื่อ)
import RecipeCard from "./RecipeCard";

export { RecipeCard };

// app/_components/HomeBanner.tsx — pure และใช้แค่หน้าแรก
const HomeBanner = () => {
  return <h1>Wongnok — สูตรอาหารวันนี้</h1>;
};

export default HomeBanner;

แล้ว app/page.tsx เหลือหน้าที่แค่วางของ:

// app/page.tsx
import HomeBanner from "./_components/HomeBanner";
import { RecipeList } from "@/containers/RecipeList";

export default function Home() {
  return (
    <main>
      <HomeBanner />
      <RecipeList />
    </main>
  );
}

ผลรันจริง — HTML ที่ server ส่งมา (ตัดเฉพาะ <main> จัดบรรทัดใหม่ เนื้อหาไม่แก้):

$ curl -s http://localhost:379/
<main>
  <h1>Wongnok — สูตรอาหารวันนี้</h1>
  <section>
    <button>เฉพาะเมนูไม่เกิน 15 นาที</button>
    <article class="rounded border p-3"><h3>ข้าวผัดกะเพรา</h3><p>15<!-- --> นาที</p></article>
    <article class="rounded border p-3"><h3>ต้มยำกุ้ง</h3><p>30<!-- --> นาที</p></article>
    <article class="rounded border p-3"><h3>ไข่เจียว</h3><p>5<!-- --> นาที</p></article>
  </section>
</main>

สังเกตว่า RecipeCard.tsx ไม่มี "use client" ก็ใช้ได้ เพราะมันไม่มี hook เลย · ส่วน container ขาดไม่ได้ — ผมลองลบสองบรรทัดแรกของ RecipeList.tsx ออกแล้ว build:

$ npx next build   # (ผลรันจริง ตัดกรอบที่ชี้บรรทัดโค้ดออก · ข้อความ Error ยาวบรรทัดเดียว เลื่อนขวาดูได้)
> Build error occurred
Error: Turbopack build failed with 1 error:
./containers/RecipeList/RecipeList.tsx:1:10
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

Ecmascript file had an error

Import trace:
  Server Component:
    ./containers/RecipeList/RecipeList.tsx
    ./app/page.tsx

นี่เป็นสัญญาณที่มีประโยชน์: ไฟล์ไหนต้องมี "use client" มักเป็นไฟล์ที่ควรอยู่ใน containers/ · ถ้า component ที่ตั้งใจให้ "วาดอย่างเดียว" เริ่มต้องการ "use client" เพราะมี state ของงานเข้าไปปน ให้ถามตัวเองว่ามันควรย้ายบ้านหรือยัง (ข้อยกเว้นมีจริง — เช่นปุ่มที่จำได้แค่ว่ากำลังถูกกดค้าง ซึ่งเป็น state ของหน้าตา ไม่ใช่ของธุรกิจ)

3 · เทียบกับ Go — คล้ายแยก handler กับ service

ใน Gin (บท 38 เป็นต้นมา) คุณเคยแยกโค้ดเป็นชั้น: handler รับ request อ่าน input ตัดสินใจว่าจะเรียกอะไร แล้วส่งผลกลับ · ส่วนชิ้นเล็กที่ทำงานเฉพาะอย่าง (แปลง struct เป็น JSON, format วันที่) ไม่ต้องรู้เลยว่ามาจาก request ไหน

แนวคิดเดียวกันเป๊ะ: ของที่รู้บริบทและตัดสินใจอยู่ชั้นหนึ่ง · ของที่ทำงานตามที่ถูกป้อนอยู่อีกชั้น — ทำให้ของชั้นล่าง ย้ายไปใช้ที่อื่นได้และเทสง่าย

// Go — handler รู้งาน · ฟังก์ชันเล็กไม่รู้อะไรนอกจาก input ของมัน
func (h *RecipeHandler) List(c *gin.Context) {
    quick := c.Query("quick") == "1"          // ≈ state ของ container
    recipes := h.svc.List(quick)                // ≈ business rule
    c.JSON(200, toRecipeCards(recipes))        // ≈ component: แปลงข้อมูลเป็นหน้าตา
}

(โค้ด Go ก้อนนี้เป็นภาพประกอบแนวคิด ไม่ใช่ไฟล์เต็ม จึงไม่มี package/import)

4 · ขีดล่างหน้าชื่อโฟลเดอร์ — app/_components ไม่กลายเป็น URL

สไลด์หน้า 8 มีกล่อง Tips: “Component and container in the app/ folder are only used in themselves.”
แปลว่า ถ้าชิ้นส่วนนั้นใช้แค่หน้าเดียว ให้วางไว้ข้าง ๆ หน้านั้นเลย ในโฟลเดอร์ _components/ หรือ _containers/ ใต้ app/ · ใช้หลายหน้าเมื่อไหร่ค่อยยกขึ้นไป components/ ระดับบนสุด

แต่บทเรียน 70 บอกว่าทุกโฟลเดอร์ใต้ app/ คือชิ้นส่วนของ URL · แล้วโฟลเดอร์ชื่อ _components จะกลายเป็นหน้า /_components หรือเปล่า? ผมสร้างของสามแบบไว้เทียบกัน:

app/
├── page.tsx
├── _components/
│   ├── HomeBanner.tsx     ← ถูก import โดย app/page.tsx
│   └── page.tsx           ← ตั้งใจใส่ไว้ทดสอบ
├── components/            ← ชื่อเดียวกันแต่ "ไม่มี" ขีดล่าง
│   └── page.tsx
└── widgets/               ← ไม่มีขีดล่าง และไม่มี page.tsx
    └── Card.tsx

ทั้ง _components/page.tsx และ components/page.tsx มีเนื้อหาแบบเดียวกัน:

// app/_components/page.tsx  (อีกไฟล์เปลี่ยนแค่คำว่า _components เป็น components)
export default function Page() {
  return <p>ถ้าเห็นข้อความนี้ แปลว่า _components กลายเป็นหน้าเว็บ</p>;
}

Route (app)
┌ ○ /
├ ○ /_not-found
└ ○ /components

○  (Static)  prerendered as static content

$ for p in / /_components /components /widgets /widgets/Card /_components/HomeBanner; do ... curl -w '%{http_code}' ...
/                            200
/_components                 404
/components                  200
/widgets                     404
/widgets/Card                404
/_components/HomeBanner      404

$ curl -s http://localhost:379/components
... <p>ถ้าเห็นข้อความนี้ แปลว่า components กลายเป็นหน้าเว็บ</p> ...
$ curl -s http://localhost:379/_components
... This page could not be found ...

ถ้า widgets/ ไม่มีขีดล่างก็ 404 อยู่แล้ว ขีดล่างมีไว้ทำไม? สองเหตุผล:

1. กันพลาดในอนาคต — วันที่มีคนเผลอสร้างไฟล์ชื่อ page.tsx (หรือ route.ts) ลงไปในโฟลเดอร์นั้น เว็บจะไม่งอก URL แปลก ๆ ขึ้นมาเงียบ ๆ อย่างที่ /components ในตารางข้างบนงอกให้เห็นแล้ว
2. บอกคนอ่าน — เปิดโฟลเดอร์ app/ มาเห็นขีดล่าง รู้ทันทีว่า "อันนี้ไม่ใช่หน้าเว็บ เป็นของใช้ภายใน" ไม่ต้องไล่เปิดทีละโฟลเดอร์ว่ามี page.tsx ไหม

5 · โค้ดแบบนี้ควรอยู่ไหน

กฎที่ใช้ตัดสินมีสองคำถาม ถามตามลำดับ:
ข้อ 1 — มันจำ state ของงาน หรือรู้ business rule ไหม? ใช่ → container · ไม่ → component
ข้อ 2 — ใช้กี่หน้า? หน้าเดียว → app/<หน้านั้น>/_components หรือ _containers · หลายหน้า → ระดับบนสุด

6 · ภารกิจ — วางโครง Wongnok ให้พร้อมสำหรับบทถัดไป

Route (app)
┌ ○ /
├ ○ /_not-found
└ ○ /components

/_components   404
/components    200

7 · สรุป

อ้างอิง

• Next.js — Project Structure — อ่านหัวข้อ Private folders (กฎขีดล่างที่หัวข้อ 4 รันพิสูจน์) และ Colocation ที่อธิบายว่าไฟล์ใน app/ ที่ไม่ใช่ page/route ไม่ถูกเผยแพร่เป็น URL · เลื่อนดู Store project files outside of app กับ Store project files in top-level folders inside of app ด้วย — เป็นทางเลือกการจัดโฟลเดอร์ที่ Next.js ยอมรับทั้งคู่ ไม่มีแบบไหนผิด
• Next.js — Dynamic Route Segments — อ่านแค่ย่อหน้าแรกกับตัวอย่าง [slug] ก็พอเข้าใจว่าทำไม [another-routes] ในสไลด์หน้า 7 ถึงรับทุก URL
• Dan Abramov — Presentational and Container Components — อ่านกล่อง Update from 2019 ที่อยู่บนสุดก่อน ผู้ตั้งชื่อ pattern นี้เองบอกว่าไม่ได้แนะนำให้แบ่งเคร่งครัดแล้วเพราะมี Hooks · แล้วค่อยอ่านรายการ bullet สองชุดที่เทียบลักษณะของสองแบบ — ตรงกับนิยามในสไลด์หน้า 8
• React — Keeping Components Pure — อ่านหัวข้อ Purity: Components as formulas ความหมายของคำว่า pure ในสไลด์หน้า 8
• React — Sharing State Between Components — อ่านตัวอย่าง Lifting state up by example วิธีดึง state ออกจาก component ลูกขึ้นไปไว้ที่แม่ ซึ่งคือการสร้าง container
• Next.js — use client — ลิงก์เดียวกับที่ error ในหัวข้อ 2 ชี้มา · อ่านย่อหน้าที่อธิบายว่า directive นี้ขีดเส้นแบ่ง server กับ client — ใส่ที่ container ไฟล์เดียว component ลูกที่มัน import เข้าไปก็ถูกนับเป็นฝั่ง client ตาม (เหตุผลที่ RecipeCard ไม่ต้องใส่เอง)