NextJS - Routing - Defining Routes

# 建立 Routes

• Next.js 使用基於檔案系統的路由器，資料夾用來定義 routes。
• 每個資料夾代表一個 route segment，對應到一個 URL segment。
• 要建立 nested routes，可以將資料夾彼此巢狀。

• 使用特殊的 page.js 檔案來讓 route segments 公開存取。

• /dashboard/analytics 的 URL 路徑不公開存取，因為它沒有對應的 page.js 檔案。
• 這個資料夾可以用來存放 components、stylesheets、images 或其他相關檔案。
• 注意事項：.js, .jsx, 或 .tsx 檔案副檔名可用於特殊檔案。

# 建立 UI

• 使用特殊的檔案命名規則來為每個 route segment 建立 UI。
• 最常見的檔案是 pages，用來顯示 route 專屬的 UI，還有 layouts，用來顯示多個 routes 共享的 UI。
• 例如，要建立第一個頁面，需在 app 目錄中新增一個 page.js 檔案，並輸出一個 React 元件：

  app / page.tsx;
  TypeScript;
  
  export default function Page() {
    return <h1>Hello, Next.js!</h1>;
  }

# 參考

Next.js Documentation