กก การงง การเงิน
ไทย English
ช่องต้นทาง: mikelopster

Next.js 14 App Router: Server Components, Client Components และโครงสร้างหน้า

✍️ โดย การงง การเงิน
📅 เผยแพร่ 24 มกราคม 2569
⏱️ อ่านประมาณ 1 นาที
💡 สรุปประเด็นสำคัญ (Key Takeaways)

สรุปพื้นฐาน Next.js 14 App Router ตั้งแต่ app directory, layout และ route ไปจนถึงการเลือกใช้ Server หรือ Client Component พร้อมลิงก์เอกสารรุ่น 14

Next.js 14 App Router: Server Components, Client Components และโครงสร้างหน้า

บทเรียนของ Mikelopster แนะนำ Next.js 14 ในฐานะ React framework และเกริ่นเรื่อง routing, การทำงานฝั่ง server และ client หน้านี้สรุปโครงสร้างเริ่มต้นสำหรับผู้ที่กำลังอ่านโปรเจกต์ App Router โดยอิงเอกสาร Next.js รุ่น 14 เพื่อไม่ปะปนกับ API ของรุ่นอื่น

โครงสร้าง route ใน app directory

ใน App Router โฟลเดอร์ใต้ app ใช้กำหนด segment ของ URL และไฟล์พิเศษกำหนดหน้าที่ของ segment นั้น เช่น page สำหรับหน้า, layout สำหรับส่วนครอบร่วม, loading สำหรับสถานะรอ และ error สำหรับขอบเขตจัดการข้อผิดพลาด ตัวอย่างเช่น app/products/[id]/page.tsx ใช้กับ route สินค้าที่มีรหัสแบบไดนามิก

เลือก Server Component เป็นจุดเริ่มต้น

ใน App Router ของ Next.js 14 components ที่อยู่ใน app เป็น Server Components โดยปริยาย เหมาะกับการอ่านข้อมูลและสร้าง HTML บน server ส่วน Client Component จำเป็นเมื่อ UI ต้องใช้ state, event handler, effect หรือ browser API โดยตรง เพิ่ม "use client" ที่ขอบเขต component ที่ต้องโต้ตอบ แทนการทำทั้งหน้าฝั่ง client โดยไม่จำเป็น

// app/counter.tsx
'use client'
import { useState } from 'react'
export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

ตัวอย่างนี้แสดง state และ event handler ที่ต้องทำงานใน browser ส่วนข้อมูลเริ่มต้นหรือส่วนหน้าอื่นยังคงเป็น server-rendered ได้ การวางขอบเขตให้เล็กช่วยให้แยกหน้าที่และตรวจสอบการส่งข้อมูลระหว่าง server/client ได้ง่ายขึ้น

เช็กลิสต์ก่อนเริ่มโปรเจกต์

บทความนี้ใช้เอกสาร Next.js 14 โดยเฉพาะ ตัวอย่างและข้อกำหนดอาจต่างจากรุ่นปัจจุบัน จึงควรตรวจเวอร์ชันใน package.json และอ่านเอกสารที่ตรงกับโปรเจกต์ก่อนใช้งาน

แหล่งอ้างอิง

แหล่งที่มา: วิดีโอต้นทาง

กก

กองบรรณาธิการ การงง การเงิน

สร้างสรรค์เนื้อหาการเงินส่วนบุคคล การลงทุน และการจัดการหนี้สินให้อ่านเข้าใจง่าย ทำตามได้จริง มุ่งเน้นมาตรฐานความถูกต้องและโปร่งใสตามหลักเกณฑ์วิชาชีพทางการเงิน