File-based Routing

ใน Next.js App Router ทุก page.tsx ภายใน app/ จะกลายเป็น route ใน Astro หลักการเดียวกันนี้ใช้ได้แต่ convention เรียบง่ายกว่า: ไฟล์ .astro ใดก็ตามภายใน src/pages/ จะแมปกับ URL โดยตรง ชื่อไฟล์คือ path segment

Multi-page routing ต้องการหลายไฟล์ — รัน example เหล่านี้ใน Astro project เต็มรูปแบบ (npm create astro@latest) ในเครื่องของคุณ

การแมปไฟล์ → URL

ตารางด้านล่างแสดงวิธีที่ path ภายใน src/pages/ กลายเป็น URL ซึ่งสะท้อน Next.js Pages Router convention — ถ้าคุณรู้จัก /pages อยู่แล้ว ก็รู้จัก Astro routing แล้ว

File path	URL
`src/pages/index.astro`	`/`
`src/pages/about.astro`	`/about`
`src/pages/blog/index.astro`	`/blog`
`src/pages/blog/first-post.astro`	`/blog/first-post`
`src/pages/contact.astro`	`/contact`

การเปรียบเทียบแบบ side-by-side

// Next.js App Router
app/
  page.tsx           → /
  about/
    page.tsx         → /about
  blog/
    page.tsx         → /blog
    first-post/
      page.tsx       → /blog/first-post

// Next.js Pages Router
pages/
  index.tsx          → /
  about.tsx          → /about
  blog/
    index.tsx        → /blog
    first-post.tsx   → /blog/first-post

// Astro src/pages/
src/pages/
  index.astro        → /
  about.astro        → /about
  blog/
    index.astro      → /blog
    first-post.astro → /blog/first-post

// ไม่ต้องมี page.tsx wrapper
// ไฟล์ .astro คือ page นั้นเลย

หน้าตาของไฟล์ page

ไฟล์ page .astro ก็คือ .astro component ธรรมดา ความแตกต่างอยู่ที่ตำแหน่ง — ไฟล์ใน src/pages/ จะถูกใช้เป็น route

// app/about/page.tsx  (Next.js App Router)
export default function AboutPage() {
  return (
    <main>
      <h1>About</h1>
      <p>Welcome to the about page.</p>
    </main>
  );
}

---
// src/pages/about.astro
import Layout from '../layouts/Layout.astro';
---
<Layout title="About">
  <main>
    <h1>About</h1>
    <p>Welcome to the about page.</p>
  </main>
</Layout>

File tree ของ project

นี่คือหน้าตาทั่วไปของ Astro project หลังเพิ่ม route สองสามเส้น:

flowchart TD
  src["src/"] --> layouts["layouts/"]
  src --> pages["pages/"]
  layouts --> layoutFile["Layout.astro (shared wrapper)"]
  pages --> indexFile["index.astro"]
  pages --> aboutFile["about.astro"]
  pages --> blog["blog/"]
  blog --> blogIndex["index.astro"]
  blog --> firstPost["first-post.astro"]
  indexFile --> indexURL["/"]
  aboutFile --> aboutURL["/about"]
  blogIndex --> blogURL["/blog"]
  firstPost --> firstPostURL["/blog/first-post"]

Astro project file tree mapped to URLs