การ routing บนพื้นฐานไฟล์ใน App Router ทำงานอย่างไร

Question

Accepted Answer

ใน App Router **โครงสร้างโฟลเดอร์ภายใน `app/` จะกำหนด routes ของคุณ** — ไม่มีการกำหนดค่า router ให้เขียน โฟลเดอร์แต่ละโฟลเดอร์คือ URL segment และไฟล์พิเศษภายในจะกำหนดว่า segment นั้นจะ render อะไร ## โฟลเดอร์ = URL segments ```text app/ page.tsx → / about/page.tsx → /about blog/page.tsx → /blog blog/[slug]/page.tsx → /blog/:slug (dynamic segment) shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL) ``` ## ไฟล์พิเศษ โฟลเดอร์แต่ละโฟลเดอร์สามารถมีชื่อไฟล์ที่สงวนไว้ได้ ซึ่งแต่ละชื่อมีบทบาทเฉพาะ: ```text page.tsx → the route's UI (REQUIRED to make a segment routable) layout.tsx → shared wrapper that persists across child routes loading.tsx → loading UI (auto-wraps the page in ) error.tsx → error boundary for the segment not-found.tsx→ 404 UI route.ts → an API endpoint (instead of a page) ``` ## Dynamic segments ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default function Post({ params }: { params: { slug: string } }) { return

Post: {params.slug}

; // params.slug = "hello" } ``` วงเล็บเหลี่ยมสร้างพารามิเตอร์แบบไดนามิกที่ส่งไปยังหน้าผ่าน `params` รูปแบบอื่น ๆ: `[...slug]` (catch-all), `[[...slug]]` (optional catch-all) ## Route groups และการจัดระเบียบ ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` วงเล็บกลมสร้าง **route groups** เพื่อจัดระเบียบไฟล์หรือใช้ layout ที่แตกต่างกันโดยไม่ส่งผลต่อ URL ## เหตุใดจึงสำคัญ การ routing บนพื้นฐานไฟล์ทำให้โครงสร้าง URL ชัดเจนจากต้นไม้ไฟล์ — ไม่มีการกำหนดค่า route ส่วนกลางที่ต้องดูแลรักษาและเก็บไว้ในการซิงค์ การทำความเข้าใจชื่อไฟล์พิเศษ (`page`, `layout`, `loading`, `error`, `route`) และข้อตกลง bracket (`[param]`, `[...catchAll]`, `(group)`) เป็นศัพท์เฉพาะขั้นพื้นฐานสำหรับการสร้างแอป App Router ใด ๆ