開始來仔細研究 Next.js 13 的 App router 功能。

首先是基本的定義方式，route 結構是根據 app 目錄底下的內容去定義的，會跟據資料目錄的層狀結構產生對應的路由，這跟以前相同。

<host>/setting/profile 這個網址對應的結構會是

app
└── setting
    └── profile
        └── page.tsx

跟以前不同的是，頁面的主體不是對應路由的名稱或是路由目錄下的 index.tsx ，而是路由目錄下的 page.tsx ，只能是這個名字（如果不是用 typescript 的話會是 page.js)。

這樣帶來了許多方便，因為路由只會去注意 page.tsx 而忽略掉大部分其他的檔案，所以就能夠將該頁面特有的元件或是測試檔案直接放在鄰近的目錄底下集中管理，不用擔心會因此生成路由。

app
└── setting
    └── profile
        ├── components
        │   └── Title.tsx
        ├── page.spec.tsx
        └── page.tsx

再來是動態路由跟以前一樣，用 [] 去定義。

app
└── user
    └── [id]
        └── page.tsx

動態的部分會作為 prop 傳入頁面元件。

export interface IdProps {
  params: {
    id: string;
  };
}

function User({ params: { id } }: IdProps) {
  return (
    <div>
      <h1>Welcome to User! {id}</h1>
    </div>
  );
}

export default User;

Router groups 與 layout

如果不同的頁面之間會有共用的外框結構，例如狀態列跟選單，那應該定義一個 layout 元件在頁面間共用，減少程式碼重複，而且 Next 在切換頁面間也能避免重新渲染 layout 的部分。

路由目錄底下可以定義 layout.tsx ，來給頁面上框。

app
└── settings
    ├── page.tsx
    └── layout.tsx

而要跨頁面共用的話，則要搭配 router groups 功能。

.
└── (auth)
    ├── console
    │   └── page.tsx
    ├── settings
    │   └── page.tsx
    └── layout.tsx

當目錄名稱被 () 框起來時，並不會被算進路由當中，所以像上圖生成的路由會是

<host>/console
<host>/settings

這樣的好處是讓多個頁面可以共用 layout ，並且某些判定可以集中在 layout 中管理，例如檢查使用者是否有登入。