app router 的路由機制

app router

在新版的 Next.js 中改使用了 app router 來取代舊版的 pages router，同樣延續了舊的 file-based routing 機制，只是現在需要將這些路徑檔案歸到 app 的目錄底下，本篇文章主要提到的會是 app router 的一些特性和使用方法。

基本運作

參考 官方文件 的說明，在 app 目錄底下所建立的資料夾名稱會直接對應到實際的路由，並在資料夾底下建立 page.js/jsx/tsx 即可創建該路由底下的頁面，例如：

這樣的目錄結構就可以對應到

/dashboard

/dashboard/settings

/api

這些路徑。

動態路由

另一個常見的情境是想要匹配到動態的路由 ( 例如產品編號、文章編號等等 )，這個狀況下可以像上圖那樣建立一個使用 [] 包覆的資料夾，其底下的 page 就可以接收網址中的參數，例如：

// /blog/[slug]/page.tsx

type Props = {
  params: {
    slug: string;
  }
}

export default function Page({ params }: Props) => {
  return <div>{params.slug}</div> // 接收網址中的 slug 參數
}  

後續就可以將參數傳給底下的元件做利用了。

共用 layout

還有一種情境是會在不同的路由底下有共用的版型，像是一個網站可能在不同分頁底下共用同樣的 header，就很適合使用共用 layout 的方法來避免重複引用元件。具體的作法是在需要共用版型的該層目錄，將其名稱使用 () 包覆，並在該層建立一個 layout.js/jsx/tsx 即可。

// /dashboard/(withHeader)/layout.tsx

export default function HeaderLayoutPage({ children }: PropsWithChildren<{}>) => {
   return (
    <>
      <header>共用 Header</header>
      <main>{children}</main>
    </>
}  

跳過路由

使用跳過路由與否主要會和專案架構有一點關聯，有些專案的架構設計會讓 app 目錄底下只出現和路由相關的檔案以維持結構的清晰，而若是需要在其中放入一些不匹配路由的目錄 ( 例如一些小元件的存放 )，可以在目錄的名稱前加上底線 ( 例如 _component )，如此一來該層就不會被帶入到路由的匹配機制中。