Next.js คืออะไร และทำไมไม่ใช่ React เปล่า ๆ

next        16.3.4
react       19.2.8
react-dom   19.2.8
typescript  5.9.3
node        v24.14.0
# โปรเจกต์สร้างด้วย: npx create-next-app@latest --ts --tailwind --eslint --app --no-src-dir
# คำสั่งที่ใช้ตรวจ:  npx tsc --noEmit  ·  npx next build  ·  npx next dev  ·  curl

1 · React ทำอะไร แล้ว Next.js ทำอะไรเพิ่ม

เริ่มจากของที่คุณรู้จักอยู่แล้ว: เบราว์เซอร์รู้จักแค่ HTML · CSS · JavaScript
ตอนเรียน HTML/CSS คุณเขียนหน้าเว็บด้วยมือทุกแท็ก อยากได้ปุ่ม 20 ปุ่มก็ก็อป <button> ยี่สิบรอบ แก้ทีต้องไล่แก้ยี่สิบที่

React คือไลบรารีที่แก้ปัญหานั้นข้อเดียว — มันให้คุณเขียน "ของ" หนึ่งชิ้น แล้วเอาไปวางกี่ที่ก็ได้ พร้อมกับคอยอัปเดตหน้าจอให้เองเมื่อข้อมูลเปลี่ยน
แต่ React ทำแค่นั้นจริง ๆ · React ไม่รู้จักคำว่า "หน้าเว็บ" ไม่รู้จัก URL ไม่รู้ว่าจะรวมไฟล์ยังไงให้เบราว์เซอร์โหลดได้ ไม่รู้ว่าจะเอา HTML ออกมาจากเซิร์ฟเวอร์ยังไง ของพวกนั้นคุณต้องหามาต่อเอง

Next.js คือกล่องที่เอา React มาใส่ไว้ แล้วแถมของที่ขาดมาให้ครบ
สไลด์หน้า 6 เขียนไว้ตรง ๆ ว่า "A popular web development framework built on top of React" และหน้าแรกของ nextjs.org พาดหัวว่า "The React Framework for the Web"
คำสำคัญคือ built on top of — Next.js ไม่ได้มาแทน React โค้ด React ที่คุณเขียนใน Next.js ก็คือโค้ด React อันเดิม แค่มีคนจัดโต๊ะให้เรียบร้อยแล้ว

ตารางที่ต้องจำจากบทนี้ — อะไรต้องทำเอง อะไรได้ฟรี

นี่คือใจความทั้งหมดของบท ถ้าจำได้ตารางเดียวก็ถือว่าคุ้มแล้ว
คอลัมน์ซ้ายคือ "ถ้าคุณตั้งโปรเจกต์ React เปล่า ๆ เอง" คอลัมน์ขวาคือ "ถ้าคุณใช้ Next.js"

2 · "component" คืออะไร เทียบกับ func ที่คุณเขียนใน Go

สไลด์หน้า 10 นิยามไว้ประโยคเดียว: "It takes types props, manages typed state, and returns JSX."
ตัดศัพท์ออกให้หมดแล้วเหลือแค่นี้ — component คือฟังก์ชันธรรมดา ๆ ที่คืน "หน้าตา" แทนที่จะคืนข้อมูล

เทียบกับของที่คุณเขียนมาแล้วเก้าวัน:

แถวสุดท้ายคือแถวที่ทำให้คนมาจากฝั่ง backend งงที่สุด
ใน Go คุณเรียก CalculateBill() หนึ่งครั้ง ได้ผลลัพธ์ แล้วจบ
ใน React ฟังก์ชันเดียวกันนั้นถูกเรียกซ้ำแล้วซ้ำอีก ทุกครั้งที่ข้อมูลขยับ แล้ว React ก็เอาผลลัพธ์รอบใหม่ไปเทียบกับรอบก่อน แล้วแก้หน้าจอเฉพาะจุดที่ต่าง
เพราะแบบนี้ component จึงต้องให้ผลเหมือนเดิมเสมอเมื่อ input เหมือนเดิม — ซึ่งก็คือ pure function ที่คุณเพิ่งเรียนไปในบท 65–67 นั่นแหละ ไม่ใช่ของใหม่

โค้ดในสไลด์หน้า 10 — และเหตุผลที่มันคอมไพล์ไม่ผ่านกับของจริง

สไลด์เขียนโค้ดนี้ไว้ (ผมพิมพ์ตามที่เห็นในสกรีนช็อตทุกตัวอักษร):

// components/t69/Greeting.tsx — ตามสไลด์หน้า 10 เป๊ะ ๆ
function Greeting(
  { name }: { name: string }
): JSX.Element {
  return <h1>Hello, {name}</h1>;
}

components/t69/Greeting.tsx(3,4): error TS2503: Cannot find namespace 'JSX'.

import type { JSX } from "react";   // ← บรรทัดที่สไลด์ไม่มี

function Greeting(
  { name }: { name: string }
): JSX.Element {
  return <h1>Hello, {name}</h1>;
}

export default Greeting;

3 · ทำไม component ถึงเอากลับมาใช้ซ้ำได้

คำตอบสั้นมาก: เพราะมันเป็นฟังก์ชัน · ฟังก์ชันเรียกซ้ำได้ด้วยอาร์กิวเมนต์คนละชุด component ก็เหมือนกันเป๊ะ แค่ "อาร์กิวเมนต์" เขียนอยู่ในแท็ก

ผมเขียนไฟล์นี้ไว้จริงในโปรเจกต์ — สิบสี่บรรทัด เขียนครั้งเดียว:

// components/t69/PriceTag.tsx
import type { JSX } from "react";

type PriceTagProps = {
  label: string;
  baht: number;
};

export default function PriceTag({ label, baht }: PriceTagProps): JSX.Element {
  return (
    <p>
      {label}: {baht.toLocaleString("th-TH")} บาท
    </p>
  );
}

แล้วเรียกใช้สามครั้งด้วยข้อมูลคนละชุด:

// app/t69/page.tsx
import Greeting from "@/components/t69/Greeting";
import PriceTag from "@/components/t69/PriceTag";

export default function Page() {
  return (
    <main>
      <Greeting name="DevPool" />
      <PriceTag label="ค่าไฟเดือนนี้" baht={1250} />
      <PriceTag label="ค่าน้ำเดือนนี้" baht={340} />
      <PriceTag label="ค่าเน็ตเดือนนี้" baht={599} />
    </main>
  );
}

HTML ที่ออกมาจริง (ผม curl มาแล้วตัดเอาเฉพาะ <main>)
ของจริงเป็นบรรทัดเดียวยาว ๆ ผมแค่กด Enter คั่นให้อ่านง่าย ไม่ได้ตัดตัวอักษรตัวไหนออกเลย — รวมทั้งของแปลก ๆ ที่คุณกำลังจะเห็น:

<main><h1>Hello, <!-- -->DevPool</h1>
<p>ค่าไฟเดือนนี้<!-- -->: <!-- -->1,250<!-- --> บาท</p>
<p>ค่าน้ำเดือนนี้<!-- -->: <!-- -->340<!-- --> บาท</p>
<p>ค่าเน็ตเดือนนี้<!-- -->: <!-- -->599<!-- --> บาท</p></main>

"Everything is component"

สไลด์หน้า 11 ทั้งหน้ามีข้อความเดียว: "Everything is component" แล้วหน้า 12 ก็เอาสกรีนช็อต Outlook มาตีกรอบสีทับทุกส่วน — แถบบนหนึ่งกรอบ · เมนูซ้ายหนึ่งกรอบ · รายการเมลหนึ่งกรอบ · เมลแต่ละฉบับในรายการอีกกรอบซ้อนเข้าไป

หน้าเว็บหนึ่งหน้า ไม่ได้มองเป็น "หน้า" แต่มองเป็นต้นไม้ของกล่อง

  <Page>
   ├── <TopBar />              ← กล่องเดียว ใช้ทุกหน้า
   ├── <Sidebar>
   │     ├── <FolderItem name="Inbox"      count={517} /> ┐
   │     ├── <FolderItem name="Junk Email" count={2}   /> ├ ไฟล์เดียวกัน
   │     └── <FolderItem name="Drafts"     count={0}   /> ┘ ใช้ 3 ครั้ง
   └── <MailList>
         ├── <MailRow ... />   ┐
         ├── <MailRow ... />   ├ ไฟล์เดียวกัน จะมี 5 หรือ 500 แถวก็ได้
         └── <MailRow ... />   ┘

ประโยคนี้ฟังดูเวอร์ แต่มันเป็นวิธีมองงาน ไม่ใช่คำโฆษณา
เวลาได้ดีไซน์มาแผ่นหนึ่ง งานแรกไม่ใช่ลงมือเขียน HTML — งานแรกคือลากกรอบทับดีไซน์ว่าอะไรซ้ำบ้าง ของที่ซ้ำคือ component ส่วนที่ต่างกันระหว่างของซ้ำ ๆ นั้นคือ props
ในตัวอย่างข้างบน FolderItem ต่างกันแค่ชื่อกับตัวเลข — สองอย่างนั้นจึงเป็น props

4 · Routing มาจากโฟลเดอร์ — พิสูจน์

สไลด์หน้า 7 เรียกว่า "Create routes using the file system"
แปลว่า ไม่มีไฟล์ตารางเส้นทางให้แก้ · ที่อยู่ของไฟล์คือ URL

ผมสร้างแค่โฟลเดอร์ app/t69/ แล้ววางไฟล์ page.tsx ลงไปไฟล์เดียว ไม่ได้ไปประกาศอะไรเพิ่มที่ไหนเลย แล้วยิงคำสั่งนี้:

$ curl -s -o /dev/null -w "%{http_code}\n" http://localhost:PORT/t69
200

$ curl -s -o /dev/null -w "%{http_code}\n" http://localhost:PORT/t69/settings
404

/t69 ได้ 200 เพราะมีโฟลเดอร์ · /t69/settings ได้ 404 เพราะไม่มีโฟลเดอร์ settings ข้างใน · แค่นั้นเลย ไม่มีความลับอะไรมากกว่านี้

ตอนสั่ง npx next build Next.js พิมพ์ตารางเส้นทางที่มันหาเจอออกมาให้ดูด้วย:

▲ Next.js 16.3.4 (Turbopack)
✓ Compiled successfully in 358ms

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

○  (Static)  prerendered as static content

5 · "Server rendering" คืออะไร — พิสูจน์ด้วยไฟล์ที่มันทิ้งไว้

บรรทัดสุดท้ายของตารางข้างบนเขียนว่า ○ (Static) prerendered as static content
คำว่า prerendered แปลว่า "วาดเสร็จไว้ล่วงหน้าแล้ว" และมันไม่ใช่คำโฆษณา — มันทิ้งไฟล์ไว้ให้ดูจริง ๆ

$ ls .next/server/app/ | grep t69
t69
t69.html
t69.meta
t69.rsc
t69.segments

$ cat .next/server/app/t69.html   # (ตัดเอาเฉพาะ <main>)
<main><h1>Hello, <!-- -->DevPool</h1><p>ค่าไฟเดือนนี้<!-- -->: <!-- -->1,250<!-- --> บาท</p>…</main>

หยุดตรงนี้แล้วดูให้ดี: ข้อความ "Hello, DevPool" อยู่ในไฟล์ .html จริง ๆ ตั้งแต่ตอน build เสร็จ ก่อนที่จะมีเบราว์เซอร์ตัวไหนเปิดหน้านี้ด้วยซ้ำ
ถ้าเป็น React เปล่า ๆ ตามท่ามาตรฐาน สิ่งที่อยู่ในไฟล์ HTML จะเป็น <div id="root"></div> ว่าง ๆ แล้วรอ JavaScript โหลดเสร็จค่อยวาด

6 · กับดักแรกที่จะเจอ: ตัวพิมพ์ใหญ่ตัวเดียว

ในเมื่อ component เป็นแค่ฟังก์ชัน แล้ว React รู้ได้ยังไงว่า <PriceTag /> คือ component ของเรา ส่วน <p> คือแท็ก HTML?
คำตอบคือมันดูตัวอักษรตัวแรก ตัวพิมพ์ใหญ่ = component ของคุณ · ตัวพิมพ์เล็ก = แท็ก HTML ที่เบราว์เซอร์รู้จัก

// app/t69/page.tsx — ผมเปลี่ยนแค่ตัว P เป็นตัวเล็ก
import PriceTag from "@/components/t69/PriceTag";

const priceTag = PriceTag;   // ← ของอันเดียวกันเป๊ะ แค่ชื่อขึ้นต้นตัวเล็ก

export default function Page() {
  return (
    <main>
      <priceTag label="ค่าไฟเดือนนี้" baht={1250} />
    </main>
  );
}

app/t69/page.tsx(9,7): error TS2339: Property 'priceTag' does not exist on type 'JSX.IntrinsicElements'.

7 · สรุปเป็นสามประโยค

  React    =  วิธีเขียน UI เป็นชิ้น ๆ ที่ประกอบกันได้     (ไลบรารี)
  Next.js  =  React + routing + rendering + bundling   (เฟรมเวิร์ก)
  component = ฟังก์ชันที่รับ props แล้วคืน JSX          (ไม่ใช่ของใหม่ — มันคือฟังก์ชัน)

บทหน้าเราจะลงมือติดตั้งจริง แล้วกางโครงโฟลเดอร์ที่ create-next-app สร้างให้ดูทีละไฟล์ ว่าอันไหนแตะได้ อันไหนอย่าเพิ่งแตะ

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

อ้างอิง

• Next.js Docs — หน้าแรกของเอกสาร — อ่านหัวข้อ What is Next.js? สามย่อหน้าอย่างเดียวพอ โดยเฉพาะประโยคที่บอกว่ามัน "automatically configures lower-level tools like bundlers and compilers" — นั่นคือแถว Bundling ในตารางหัวข้อ 1 ของบทนี้พูดด้วยคำของเจ้าของเอง
• Next.js Docs — Layouts and Pages — อ่านหัวข้อ Creating a page ซึ่งอธิบายเรื่องเดียวกับหัวข้อ 4 ของบทนี้ คือไฟล์ page.tsx ในโฟลเดอร์ไหน ก็กลายเป็น URL นั้น · เลื่อนดูตัวอย่าง nested folder ต่ออีกนิดเพื่อเดาให้ออกว่าบท 70 กำลังจะพาไปไหน
• React Docs — Your First Component — อ่านหัวข้อ Step 2: Define the function และ Pitfall กล่องสีที่อยู่ถัดลงไป ซึ่งพูดเรื่องตัวพิมพ์ใหญ่ตัวแรกโดยตรง — เป็นที่มาของ TS2339 ในหัวข้อ 6
• React Docs — Passing Props to a Component — อ่านย่อหน้าเปิด แล้วข้ามไปหัวข้อ Step 2: Read props inside the child component เพื่อดูว่าทำไมถึงเขียน { label, baht } แกะออกมาแบบนั้นได้ (มันคือ destructuring ตัวเดียวกับที่คุณใช้ในบท 66)
• React 19 Upgrade Guide — อ่านหัวข้อ The JSX namespace in TypeScript ซึ่งอธิบายว่าทำไมชื่อ JSX แบบ global ถึงถูกย้ายไปไว้ใต้ React.JSX — นี่คือเอกสารต้นทางของ TS2503 ที่คุณเจอในหัวข้อ 2