ติดตั้ง Next.js และอ่านโครงโฟลเดอร์ให้ออก

คำสั่งสร้างโปรเจกต์ — และจุดที่สไลด์พิมพ์ผิด

สไลด์หน้า 14 ("Create First NextJS App") ให้คำสั่งมาสามบรรทัด ตามตัวจัดการแพ็กเกจสามเจ้า:

# สามบรรทัดนี้คือสิ่งที่อยู่บนสไลด์หน้า 14 — ก็อปมาตามตัวอักษร
$ npm create-next-app@latest
$ yarn create next-app@latest
$ pnpm create next-app@latest

สังเกตไหมว่าบรรทัดแรกหน้าตาไม่เหมือนอีกสองบรรทัด — yarn กับ pnpm มีเว้นวรรคระหว่าง create กับ next-app แต่บรรทัดของ npm เป็น ขีดกลาง
ตอนอ่านบนสไลด์มันดูเป็นเรื่องเล็กมาก แต่ลองรันดูจริง:

$ npm create-next-app@latest

Unknown command: "create-next-app@latest"

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

ทำไม yarn/pnpm ถูก แต่ npm ผิด ทั้งที่หน้าตาคล้ายกัน?
คำตอบอยู่ในหน้าช่วยเหลือของ npm เอง — ผลรันจริงอีกอัน:

$ npm create --help

Create a package.json file

Usage:
npm init <package-spec> (same as `npx create-<package-spec>`)
npm init <@scope> (same as `npx <@scope>/create`)

บรรทัดที่เป็นกุญแจคือ npm init <package-spec> (same as `npx create-<package-spec>`)

• create คือชื่อคำสั่ง (เป็นชื่อเล่นของ npm init)
• next-app@latest คือของที่ส่งให้คำสั่งนั้น — npm จะเติม create- ให้เอง กลายเป็นแพ็กเกจ create-next-app
• เขียนติดกันเป็น create-next-app@latest = คุณกำลังบอกว่า "รันคำสั่งชื่อนี้" ซึ่งไม่มีอยู่จริง

ตอบคำถามตอนติดตั้ง แล้วได้อะไรกลับมาบ้าง

พอคำสั่งรันได้ มันจะถามชื่อโปรเจกต์ก่อน แล้วถามต่อว่าจะใช้ค่าที่แนะนำไหม
สกรีนช็อตบนสไลด์หน้า 14 โชว์ตัวเลือกแรกว่า "Yes, use recommended defaults" พร้อมรายการที่มันจะเปิดให้:

# ข้อความบนสไลด์หน้า 14 ในช่องตัวเลือกแรก
TypeScript, ESLint, No React Compiler, Tailwind, ... directory, App Router, AGENTS.md

อ่านบรรทัดนี้ให้ออกทีละคำ เพราะมันคือสรุปว่าโปรเจกต์คุณจะหน้าตายังไงไปอีกทั้งคอร์ส:

พอกด Enter เสร็จ นี่คือผลรันจริงในโปรเจกต์ที่ได้ (next 16.3.4) · ผมสั่ง ls -1a — เลข 1 แปลว่า "บรรทัดละชื่อ" ซึ่งอ่านง่ายกว่าแบบหลายคอลัมน์
ผมตัดออกสามบรรทัดที่ไม่ได้มาจาก create-next-app — .next กับ tsconfig.tsbuildinfo ที่เกิดตอนรันโปรเจกต์ และ components ที่ผมสร้างเองทีหลัง

$ ls -1a
.
..
.git
.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

สามข้อสังเกตที่ผู้เรียนมักสะดุด:

• .git/ โผล่มาเอง — create-next-app สั่ง git init ให้เลย คุณไม่ต้องสั่งเอง (และไม่ต้องตกใจว่าเผลอไปทำอะไร)
• .next/ ยังไม่มีตอนนี้ · มันจะโผล่มาหลังคุณรันเว็บครั้งแรก เป็นที่เก็บของที่ Next.js สร้างขึ้นเอง — อย่าไปแก้ไฟล์ในนั้น และมันอยู่ใน .gitignore แล้ว
• AGENTS.md กับ CLAUDE.md ติดมาด้วยจริง ๆ ในเวอร์ชันนี้ — สไลด์หน้า 18 ก็โชว์สองไฟล์นี้อยู่ในแถบ EXPLORER เหมือนกัน

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

รันเว็บขึ้นมาดู

สไลด์หน้า 15 ให้สามบรรทัดตามตัวจัดการแพ็กเกจ — อันนี้สไลด์ถูกทั้งสามบรรทัด:

$ npm run dev     # หรือ
$ yarn dev        # หรือ
$ pnpm dev

ทำไม npm ต้องมีคำว่า run แต่อีกสองตัวไม่ต้อง? เพราะ dev ไม่ใช่คำสั่งของ npm — มันคือชื่อสคริปต์ที่เขียนไว้ใน package.json ซึ่ง npm ต้องให้บอกก่อนว่าจะ "run" สคริปต์
เปิด package.json จริงในโปรเจกต์นี้ดูก็จะเห็น:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "eslint"
}

นี่คือผลรันจริงตอนสั่งรัน (ผมมาสก์เลข IP ในวงแลนออกเป็น x.x):

▲ Next.js 16.3.4 (Turbopack)
- Local:         http://localhost:370
- Network:       http://192.168.x.x:370
✓ Ready in 156ms
✓ Running next.config.ts took 12ms

• Turbopack ในวงเล็บคือตัวแปลงโค้ดที่ Next 16 ใช้เป็นค่าปริยายแล้ว — สังเกตเลข Ready in 156ms นั่นคือเหตุผลที่เขาเปลี่ยนมาใช้มัน
• Local คือที่อยู่สำหรับเครื่องคุณเอง · Network คือที่อยู่ให้มือถือ ที่ต่อ Wi-Fi ตัวเดียวกันเปิดได้ — มีประโยชน์มากตอนอยากลองบนจอเล็กจริง ๆ
• ผมรันที่พอร์ต 370 เพราะโปรเจกต์นี้ใช้ร่วมกันหลายบท · ค่าปริยายของ Next.js คือ 3000 คุณจะได้ http://localhost:3000

หน้าที่ได้จะเป็นหน้าต้อนรับที่มีข้อความ "To get started, edit the page.tsx file." (ตรงกับสกรีนช็อตบนสไลด์หน้า 15 เป๊ะ) — ประโยคนี้ไม่ได้เขียนเล่น ๆ มันกำลังบอกคุณว่าไฟล์ไหนคือหน้าแรก ซึ่งเป็นเรื่องของหัวข้อถัดไป

plugin ที่แนะนำ — และอันไหนที่ "ลงแล้วไม่พอ"

สไลด์หน้า 16 แนะนำสี่ตัว ผมเพิ่มคอลัมน์ว่ามันทำอะไรให้จริง ๆ:

เรื่องใหญ่ที่สุดของบทนี้ — ชื่อโฟลเดอร์คือ URL

ในบท 38 คุณเขียน route ของ Gin ด้วยมือ ทีละบรรทัด แบบนี้:

// Gin — คุณเป็นคนบอกเองว่า path ไหนไปเรียกฟังก์ชันไหน
r.GET("/users/:id", getUserHandler)

ใน Next.js บรรทัดแบบนี้ไม่มี — และไม่มีที่ให้เขียนด้วย
Next.js ไปไล่อ่านโฟลเดอร์ใต้ app/ แล้วสร้าง route ให้เองจาก ชื่อโฟลเดอร์ · กฎมีสองข้อเท่านั้น:

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

ผมสร้างของจริงในโปรเจกต์ทดลองสี่โฟลเดอร์ แล้วรันดู นี่คือสิ่งที่สร้าง:

app/
└── t70/                    ← ชื่อโฟลเดอร์ที่ผมใช้กันชนกับบทอื่น
    ├── layout.tsx          ← ไม่ใช่หน้าเว็บ (หัวข้อถัดไปจะพูดถึง)
    ├── page.tsx            ← หน้าเว็บ  →  /t70
    ├── about/
    │   └── page.tsx        ← หน้าเว็บ  →  /t70/about
    ├── blog/                ← ไม่มี page.tsx ของตัวเอง เป็นแค่ทางผ่าน  →  ???
    │   └── hello/
    │       └── page.tsx    ← หน้าเว็บ  →  /t70/blog/hello
    └── secret/
        └── note.tsx        ← ไฟล์ธรรมดา ชื่อไม่ใช่ page.tsx  →  ???

เนื้อในแต่ละ page.tsx สั้นมาก แค่พอให้แยกออกว่าอันไหนเป็นอันไหน — นี่คือไฟล์ app/t70/about/page.tsx ทั้งไฟล์:

export default function About() {
  return <h1>PAGE: /t70/about</h1>;
}

# รันเว็บแล้วยิงทั้งสี่ที่อยู่ดู
$ curl -o /dev/null -w "HTTP %{http_code}\n"  http://localhost:370/t70
$ curl -o /dev/null -w "HTTP %{http_code}\n"  http://localhost:370/t70/about
$ curl -o /dev/null -w "HTTP %{http_code}\n"  http://localhost:370/t70/blog/hello
$ curl -o /dev/null -w "HTTP %{http_code}\n"  http://localhost:370/t70/secret
$ curl -o /dev/null -w "HTTP %{http_code}\n"  http://localhost:370/t70/blog

/t70                   HTTP 200
/t70/about             HTTP 200
/t70/blog/hello        HTTP 200
/t70/secret            HTTP 404
/t70/blog              HTTP 404

อีกหลักฐานที่หนักแน่นกว่า curl คือ ตารางที่ next build พิมพ์ออกมาเอง ตอนจบ · ผลรันจริง (ผมตัดบรรทัดของบทอื่นที่อยู่ในโปรเจกต์เดียวกันออก เหลือเฉพาะของบทนี้):

$ npx next build

✓ Compiled successfully in 647ms
  Running TypeScript ...
✓ Generating static pages using 9 workers (30/30) in 138ms

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /t70
├ ○ /t70/about
├ ○ /t70/blog/hello
└ ...

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

/t70/secret ไม่มีอยู่ในตารางนี้ — Next.js ไม่รู้จักมันตั้งแต่ตอน build แล้ว ไม่ใช่ไปพังตอนมีคนกดเข้ามา · ตารางนี้แหละคือ "รายการ route" ของโปรเจกต์คุณ ถ้าอยากรู้ว่าเว็บมีหน้าอะไรบ้าง สั่ง npx next build แล้วอ่านตารางนี้

ตารางเทียบ: path ของไฟล์ ↔ URL ที่ได้

แถวที่มี ✅ คือของที่ผม curl จริงแล้วได้ 200 · คอลัมน์ขวาสุดคือหน้าตาที่คุณจะเจอในโปรเจกต์ของคุณเอง ที่ไม่มีชั้น t70 คั่น

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

layout.tsx ต่างจาก page.tsx ยังไง

สไลด์หน้า 19 สรุปไว้สองบรรทัดสั้น ๆ: "layout.tsx: root layout, wraps every page" และ "page.tsx: page level to render interface"
ถูกทั้งคู่ แต่สั้นเกินกว่าจะเอาไปใช้จริง ผมขอแตกให้ครบ:

นี่คือ app/t70/layout.tsx ตัวจริงที่ผมใช้ทดลอง ตัดให้เหลือแก่น:

export default function T70Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <header>
        <strong>HEADER-FROM-LAYOUT</strong>
        <LayoutCounter />
      </header>
      <main>{children}</main>          {/* ← หน้าเว็บมาโผล่ตรงนี้ */}
      <footer>FOOTER-FROM-LAYOUT</footer>
    </div>
  );
}

{children} คือช่องว่างที่บอกว่า "เอาหน้ามาวางตรงนี้" — ไม่มีบรรทัดนี้ หน้าเว็บจะหายไปเฉย ๆ
ลอง curl หน้า /t70/blog/hello ดู นี่คือ HTML จริงที่ได้กลับมา (ผมตัดเฉพาะช่วงที่ layout สร้าง):

$ curl -s http://localhost:370/t70/blog/hello

<div><header><strong>HEADER-FROM-LAYOUT</strong>
<button id="cnt">layout counter = <!-- -->0</button>
<nav><a href="/t70">home</a> <a href="/t70/about">about</a>
<a href="/t70/blog/hello">blog/hello</a></nav></header>
<main><h1>PAGE: /t70/blog/hello</h1></main>
<footer>FOOTER-FROM-LAYOUT</footer></div>

HEADER-FROM-LAYOUT กับ FOOTER-FROM-LAYOUT โผล่มาด้วย ทั้งที่ไฟล์ app/t70/blog/hello/page.tsx มีแค่ <h1> บรรทัดเดียว — และ hello อยู่ลึกลงไปสองชั้นจากตัว layout ด้วยซ้ำ
นี่คือความหมายของคำว่า "ครอบทุกหน้า": ครอบลูกหลานทุกชั้น ไม่ใช่แค่ชั้นเดียว

ข้อที่คนพลาดบ่อยที่สุด: layout ไม่ถูกวาดใหม่ตอนเปลี่ยนหน้า

ประโยคนี้พูดกันเยอะแต่ไม่ค่อยมีใครพิสูจน์ให้ดู ผมพิสูจน์ให้:
ผมใส่ปุ่มนับเลขไว้ใน layout (ไฟล์ components/t70/LayoutCounter.tsx) ปุ่มนี้จำเลขไว้ในตัวมันเอง · ถ้า layout ถูกวาดใหม่เมื่อไหร่ เลขจะกลับไปเป็น 0

// ลำดับที่ทำในเบราว์เซอร์จริง
1. เปิด /t70            → กดปุ่มจนเลขขึ้นเป็น 2
2. กดลิงก์ "about" ใน layout  → URL เปลี่ยนเป็น /t70/about
3. อ่านเลขบนปุ่มอีกครั้ง

{
  "path": "/t70/about",
  "h1": "PAGE: /t70/about",
  "counter": "layout counter = 2",
  "sameButtonNode": true
}

{
  "path": "/t70/about",
  "counter": "layout counter = 0"
}

แล้ว component ควรไปอยู่ไหน

สไลด์หน้า 20 เสนอโครงเพิ่มอีกสองโฟลเดอร์ ซึ่งไม่ใช่กฎของ Next.js แต่เป็นข้อตกลงของทีม (Next.js ไม่รู้จักชื่อพวกนี้เลย มันสนใจแค่ page.tsx/layout.tsx):

สไลด์ยังมีกล่อง Tips ว่า "Component and container in the app/ folder are only used in themselves." — แปลว่า ถ้าชิ้นส่วนนั้นใช้ที่เดียว ให้วางไว้ข้าง ๆ หน้าที่ใช้มันเลย (ใน app/) แต่ถ้าใช้หลายที่ ให้ยกออกมาไว้ที่ components/ ระดับบนสุด

เช็คความเข้าใจ

สรุปที่เอาไปใช้พรุ่งนี้ได้

• npx create-next-app@latest (ขีดกลาง) หรือ npm create next-app@latest (เว้นวรรค) — สไลด์หน้า 14 บรรทัดแรกใช้ไม่ได้
• npm run dev → localhost:3000 · npx next build → ได้ตาราง route ทั้งเว็บ
• โฟลเดอร์ = URL · page.tsx = สิ่งที่ทำให้โฟลเดอร์นั้นกลายเป็นหน้าจริง
• layout.tsx ครอบทุกหน้าที่อยู่ใต้มัน · ซ้อนกันหลายชั้นได้ · ไม่ถูกวาดใหม่ตอนเปลี่ยนหน้าผ่านลิงก์ แต่หายหมดเมื่อโหลดใหม่ทั้งหน้า
• Tailwind ในโปรเจกต์นี้เป็น v4 — @import "tailwindcss"; ใน globals.css และไม่มี tailwind.config.js

อ้างอิง

• Next.js Docs — Installation — อ่านหัวข้อ Automatic installation อย่างเดียวพอ จะเห็นว่าเอกสารทางการใช้ npx create-next-app@latest (ขีดกลาง) ทุกที่ ซึ่งยืนยันสิ่งที่บทนี้รันให้ดู · ส่วน Manual installation ข้ามไปก่อน ยังไม่ต้องใช้
• Next.js Docs — Project Structure — ดูตารางหัวข้อ Routing Files ซึ่งลิสต์ชื่อไฟล์พิเศษทั้งหมดที่ Next.js จองไว้ (page · layout · loading · error · not-found …) บทนี้พูดถึงแค่สองตัวแรก · รู้ไว้ว่ารายการนี้มีอยู่ จะช่วยตอนเจอชื่อไฟล์แปลก ๆ ในโปรเจกต์คนอื่น
• Next.js Docs — layout.js — อ่านหัวข้อ Good to know ให้จบ มีข้อที่บทนี้พิสูจน์ไว้แล้วสองข้อ (root layout เป็นที่เดียวที่มี <html>/<body> · layout ไม่ re-render ตอน navigate) และมีอีกข้อที่บทนี้ยังไม่แตะ: layout รับ searchParams ไม่ได้ — จำไว้ เดี๋ยวจะไปงงเอาตอนทำฟิลเตอร์
• npm Docs — npm init — อ่านย่อหน้า Description ที่บอกว่า npm create เป็นชื่อเล่นของ npm init นี่คือต้นตอทั้งหมดของกับดักในหัวข้อแรก · อ่านแล้วคุณจะเดาได้เองว่าทำไม npm create vite@latest ถึงต้องเว้นวรรคเหมือนกัน
• Tailwind CSS — Upgrade Guide (v3 → v4) — อ่านแค่หัวข้อ Using the upgrade tool กับตารางแรกที่เทียบ v3 กับ v4 จะเห็นทันทีว่าทำไมโปรเจกต์นี้ถึงไม่มี tailwind.config.js · มีประโยชน์มากเวลาก็อปโค้ดจากบทความเก่าแล้วมันไม่ทำงาน