Next.js

นึกภาพก่อน

React ให้ อิฐ (component) มาสร้างหน้าจอ แต่ไม่ได้บอกว่าจะจัดหน้าอย่างไร URL ใดไปหน้าไหน ดึงข้อมูลตอนไหน หรือ build อย่างไร ต้องเลือกและประกอบเครื่องมือเอง

Next.js คือ บ้านสำเร็จรูปที่สร้างจากอิฐ React: มีระบบ routing, การ render บน server, การดึงข้อมูล และการ build มาให้พร้อม ภายในยังเขียน React ตามปกติทุกอย่าง

React กับ Next.js

File-based routing

โครงสร้างโฟลเดอร์ใน app/ คือ URL ไม่ต้องเขียนตาราง route

app/
├── layout.js              ← โครงร่วมของทุกหน้า
├── page.js                → /
├── about/
│   └── page.js            → /about
├── blog/
│   ├── page.js            → /blog
│   └── [slug]/
│       └── page.js        → /blog/hello-world, /blog/anything
└── api/
    └── users/
        └── route.js       → /api/users (API)

// app/about/page.js
export default function AboutPage() {
  return <h1>About</h1>;
}

page ต้อง export default component

Dynamic route

โฟลเดอร์ที่ชื่ออยู่ใน วงเล็บเหลี่ยม รับค่าอะไรก็ได้ที่ตำแหน่งนั้น (เทียบได้กับ :id ของ Express)

// app/blog/[slug]/page.js   →   /blog/hello-world
export default async function PostPage({ params }) {
  const { slug } = await params;      // "hello-world"
  return <h1>{slug}</h1>;
}

(ใน Next.js รุ่นก่อน 15 params เป็น object ธรรมดา ไม่ต้อง await)

Layout

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="th">
      <body>
        <nav>เมนู</nav>
        {children}
      </body>
    </html>
  );
}

children คือหน้าที่กำลังแสดง root layout เป็นที่เดียวที่เขียน tag html และ body

เปลี่ยนหน้าด้วย Link

import Link from 'next/link';

<Link href="/about">About</Link>

<Link> เปลี่ยนหน้า โดยไม่โหลดทั้งหน้าใหม่ (client-side navigation) ต่างจาก <a> ธรรมดาที่ส่ง request ขอทั้งเอกสารใหม่

Server Component กับ Client Component

ใน App Router component เป็น Server Component โดย default

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

หลัก: ให้เป็น Server Component ไว้ก่อน และใส่ 'use client' เฉพาะ component ที่ต้องโต้ตอบ (state, event, browser API)

ดึงข้อมูล

Server Component เป็น async function ได้ จึง await ข้อมูลได้ตรง ๆ โดยไม่ต้องใช้ useEffect

// app/users/page.js
export default async function UsersPage() {
  const res = await fetch('https://api.example.com/users');
  const users = await res.json();

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

ข้อมูลถูกดึง บน server HTML ที่ส่งถึง browser จึงมีรายชื่อครบตั้งแต่แรก

วิธี render

ข้อดีของการ render บน server: หน้าแรกแสดงเร็ว และ search engine อ่านเนื้อหาได้ (SEO) เพราะ HTML มีเนื้อหามาแล้ว

Route Handler: เขียน API ใน Next.js

ไฟล์ route.js export function ที่ชื่อตรงกับ HTTP method

// app/api/users/route.js
export async function GET() {
  return Response.json([{ id: 1, name: 'Ann' }]);
}

export async function POST(request) {
  const body = await request.json();
  return Response.json({ id: 2, ...body }, { status: 201 });
}

คำสั่ง

npx create-next-app@latest my-app
npm run dev      # โหมดพัฒนาที่ http://localhost:3000
npm run build    # build สำหรับใช้งานจริง
npm run start    # รันตัวที่ build แล้ว

ตัวอย่างไล่ทีละขั้น

โจทย์: จากโครงสร้างนี้ ตอบว่าแต่ละ URL แสดงอะไร และไฟล์ใดต้องมี 'use client'

app/
├── layout.js
├── page.js
├── products/
│   ├── page.js            (async, fetch รายการสินค้า)
│   └── [id]/
│       └── page.js
└── components/
    └── AddToCartButton.js (ใช้ useState และ onClick)

ไฟล์ที่ต้องมี 'use client': AddToCartButton.js เท่านั้น เพราะใช้ useState และ onClick ส่วน products/page.js เป็น Server Component: ดึงข้อมูลด้วย await fetch แล้วนำ <AddToCartButton /> มาวางได้ตามปกติ

จุดที่มักพลาด

1. ใช้ useState ใน Server Component

error ต้องใส่ 'use client' ที่บรรทัดแรกของไฟล์

2. ใส่ 'use client' ทุกไฟล์

เสียข้อดีของ Server Component ใส่เฉพาะส่วนที่โต้ตอบ

3. ตั้งชื่อไฟล์หน้าเป็นอย่างอื่น

ต้องชื่อ page.js (หรือ .jsx, .tsx) โฟลเดอร์เป็นตัวกำหนด URL

4. ใช้ a แทน Link สำหรับลิงก์ภายใน

โหลดทั้งหน้าใหม่

5. สลับ page.js กับ route.js

page.js คืน UI · route.js คืน response ของ API (โฟลเดอร์เดียวกันมีทั้งสองไม่ได้)

6. สลับ SSR กับ SSG

SSR สร้างทุก request · SSG สร้างครั้งเดียวตอน build

7. คิดว่า Next.js มาแทน React

Next.js สร้างบน React ยังใช้ component, props, state, Hooks เหมือนเดิม

ที่มา: เนื้อหาเสริม ไม่มีเอกสารใน docs/WEB