0Pricing
React Academy · บทเรียน

รูปแบบการตั้งชื่อไฟล์ของ App Router

ทำความเข้าใจไดเรกทอรี app/ และไฟล์ page.tsx, layout.tsx, loading.tsx และ error.tsx

รูปแบบการตั้งชื่อไฟล์ของ App Router เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

ไดเรกทอรี app/

เราเตอร์แอปของ Next.js ใช้ไดเรกทอรี app/ โฟลเดอร์จะกำหนดส่วนต่าง ๆ ของ URL ส่วนไฟล์พิเศษภายในโฟลเดอร์จะกำหนดลักษณะการทำงานของแต่ละส่วน

page.tsx — ส่วนติดต่อผู้ใช้ของเส้นทาง

page.tsx ส่งออกคอมโพเนนต์ React ที่แสดงผลสำหรับส่วนหนึ่งของ URL หากไม่มี page.tsx เส้นทางนั้นจะไม่สามารถเข้าถึงได้แบบสาธารณะ

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — โครงสร้างครอบที่คงอยู่

layout.tsx ครอบเส้นทางลูกไว้ และคงอยู่ตลอดการนำทาง — สถานะของโครงสร้างนี้จะไม่ถูกรีเซ็ตเมื่อเส้นทางลูกเปลี่ยนแปลง

// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

loading.tsx — ส่วนติดต่อผู้ใช้ขณะโหลดทันที

loading.tsx จะแสดงผลทันทีระหว่างที่ข้อมูลแบบอะซิงโครนัสของหน้ากำลังโหลด โดยจะครอบหน้าไว้ในขอบเขต Suspense โดยอัตโนมัติ

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — ขอบเขตข้อผิดพลาด

error.tsx คือขอบเขตข้อผิดพลาดของ React สำหรับเซกเมนต์นั้น โดยจะได้รับข้อผิดพลาดและฟังก์ชัน reset เพื่อทดลองใหม่

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — ส่วนติดต่อผู้ใช้สำหรับ 404

not-found.tsx จะแสดงผลเมื่อมีการเรียกใช้ notFound() จากคอมโพเนนต์ฝั่งเซิร์ฟเวอร์ หรือเมื่อไม่มีเส้นทางใดตรงกัน

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — โครงสร้างที่เมานต์ใหม่

template.tsx คล้ายกับ layout.tsx แต่จะสร้างอินสแตนซ์ใหม่ทุกครั้งที่นำทาง — สถานะจะถูกรีเซ็ตและเอฟเฟกต์จะทำงานใหม่ ใช้สำหรับภาพเคลื่อนไหวหรือการวิเคราะห์ข้อมูล

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — เส้นทาง API

route.ts (ไม่ใช่ route.tsx) ส่งออกตัวจัดการวิธีการ HTTP (GET, POST เป็นต้น) เพื่อสร้างจุดปลายทาง API ภายในไดเรกทอรี app/

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

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

middleware.ts — มิดเดิลแวร์บนเอดจ์

middleware.ts ที่รูทของโปรเจกต์จะทำงานก่อนทุกคำขอที่ตรงกันบนเอดจ์ — ใช้สำหรับตรวจสอบสิทธิ์ การเปลี่ยนเส้นทาง และการเขียนส่วนหัวใหม่

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

การจัดวางไฟล์ร่วม

คุณสามารถจัดวางไฟล์ที่ไม่ใช่เส้นทางร่วมกันได้ (คอมโพเนนต์ ยูทิลิตี การทดสอบ) ภายในโฟลเดอร์ app/ โดยเฉพาะไฟล์ที่ตั้งชื่อตามข้อตกลงพิเศษ (page, layout เป็นต้น) เท่านั้นที่จะถูกถือเป็นเซกเมนต์เส้นทาง

โครงสร้างซ้อน

แต่ละโฟลเดอร์สามารถมี layout.tsx ของตนเองได้ โครงสร้างซ้อนจะครอบเฉพาะองค์ประกอบลูกของเซกเมนต์นั้น และประกอบเข้ากับโครงสร้างแม่ที่อยู่เหนือขึ้นไป

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

ตรวจสอบอย่างรวดเร็ว

ไฟล์ใดของ App Router ที่จัดเตรียมส่วนสำรองของ Suspense โดยอัตโนมัติระหว่างที่ข้อมูลแบบอะซิงโครนัสของหน้ากำลังโหลด

สรุป

App Router ใช้ไฟล์พิเศษ ได้แก่ page.tsx (ส่วนติดต่อผู้ใช้ของเส้นทาง), layout.tsx (โครงสร้างครอบที่คงอยู่), loading.tsx (ส่วนสำรองของ Suspense), error.tsx (ขอบเขตข้อผิดพลาด), not-found.tsx (404), route.ts (API) และ middleware.ts (ตรรกะบนเอดจ์)

คำถามที่พบบ่อย

บทเรียน “รูปแบบการตั้งชื่อไฟล์ของ App Router” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “รูปแบบการตั้งชื่อไฟล์ของ App Router” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบการตั้งชื่อไฟล์ของ App Router”

ทำความเข้าใจไดเรกทอรี app/ และไฟล์ page.tsx, layout.tsx, loading.tsx และ error.tsx คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “รูปแบบการตั้งชื่อไฟล์ของ App Router” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. รูปแบบการตั้งชื่อไฟล์ของ App Router
  2. คอมโพเนนต์ฝั่งเซิร์ฟเวอร์กับฝั่งไคลเอ็นต์ใน Next.js
  3. เส้นทางแบบไดนามิกและกลุ่มเส้นทาง
  4. Metadata API และ SEO ใน App Router
← กลับไปที่ React Academy