Next.js Roadmap • Week 1 Day 4

Special
Files.

ทำความรู้จักกับไฟล์พิเศษใน App Router ที่ถูกออกแบบมาเพื่อจัดการ UI States อย่างเป็นระบบ เช่น การรอโหลดข้อมูล (Loading) และการจัดการข้อผิดพลาด (Error Handling)

Loading

loading.tsx

Suspense

สร้าง Instant Loading States ให้กับแอปพลิเคชัน. ทำงานภายใต้ React.Suspense โดยจะแสดง UI นี้ทันทีในขณะที่เนื้อหาของ page.tsx กำลังดึงข้อมูลจาก Server

Use Cases
Skeletons Spinners

Error

error.tsx

Client Only

ดักจับ Runtime Errors ที่เกิดขึ้นใน Route Segment นั้นๆ โดยไม่ทำให้แอปแครชทั้งหน้า.

⚠️ บังคับ: ไฟล์นี้ต้องใช้ "use client" เสมอ เพื่อให้สามารถมีปุ่มลองใหม่ (Retry) ได้

Props received
error: Error reset: () => void

Not Found

not-found.tsx

404

แสดง UI เมื่อผู้ใช้เข้าถึง URL ที่ไม่มีอยู่จริง หรือเมื่อคุณเรียกใช้ฟังก์ชัน notFound() จากภายใน Server Component

มักใช้แสดงหน้า "404 Page Not Found" แบบ Custom

Global Error

global-error.tsx

Root Only

เป็นด่านสุดท้ายในการดักจับ Error. ใช้รับมือกับข้อผิดพลาดที่เกิดขึ้นในระดับสูงสุดคือ app/layout.tsx (ซึ่ง error.tsx ปกติไม่สามารถดักจับได้)

// ต้องสร้าง และ เองในไฟล์นี้

Component Hierarchy

เมื่อเราสร้างไฟล์พิเศษเหล่านี้ในโฟลเดอร์เดียวกัน Next.js จะนำมันมาครอบ (Wrap) ซ้อนกันในระดับ React Components ตามลำดับชั้นที่กำหนดไว้โดยอัตโนมัติ ดังนี้:

React Component Tree (Simplified)
<Layout>
  <Template>
    <ErrorBoundary fallback={<Error />}>
      <Suspense fallback={<Loading />}>
        <ErrorBoundary fallback={<NotFound />}>
          <Page />
        </ErrorBoundary>
      </Suspense>
    </ErrorBoundary>
  </Template>
</Layout>

สังเกตว่า: Layout จะอยู่ นอกสุด ของ ErrorBoundary เสมอ ซึ่งหมายความว่าถ้าเกิด Error ขึ้นที่ไฟล์ Page, ตัว UI ของ Layout (เช่น Navbar, Sidebar) จะยังคงแสดงผลอยู่ตามปกติและใช้งานได้!

Writing an Error File

ตัวอย่างการเขียน error.tsx ที่ถูกต้อง โดยต้องกำหนด Directive เป็น Client Component

"use client"; // สำคัญมาก: ต้องใส่ไว้บรรทัดแรก
import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // ล็อกข้อผิดพลาดไปยังระบบ Tracking (เช่น Sentry)
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}