「App Router」在 Next.js 13 中引入，現已成為標準。這個概念與先前的 Pages Router 相比發生了很大的變化，因此有些人可能仍然對遷移猶豫不決。 本文提供了一個了解 App Router 基礎知識的逐步指南。
第 1 步：了解目錄結構的差異
在先前的 Pages Router 中，「pages」目錄中的檔案名稱被用作 URL 路由（例如，「pages/about.tsx」→「/about」）。
App Router 使用「app」目錄。 URL 路由由資料夾名稱決定，且規則已變更為始終將名為「page.tsx」的檔案放置在該資料夾中（例如「app/about/page.tsx」→「/about」）。 雖然乍看之下這似乎很麻煩，但它有一個很大的優點，可以讓與路由無關的元件和測試檔案共存於同一個資料夾中。
第 2 步：理解佈局概念
App Router 的一個強大功能是「佈局」。
建立 app/layout.tsx 可讓您將通用 UI（頁首、頁尾等）套用到該資料夾下的所有頁面。
值得注意的是，這個Layout部分在頁面轉換時並沒有重新渲染。這樣可以在保留狀態的同時實現平滑的螢幕轉換，從而大大提高應用程式效能。
步驟 3：在伺服器與客戶端之間劃清界限
這是最重要的改變。 App Router 中的元件預設為 React Server Components（在伺服器端執行的元件）。 您無法在伺服器元件內使用瀏覽器 API（例如「window」）或 React hook（例如「useState」和「useEffect」）。
如果需要按鈕點擊事件等，則需要透過在檔案頂部寫入「use client」來明確將其轉換為用戶端元件。 App Router 成功的關鍵是要記住“基本上，伺服器執行一些輕微渲染，只有互動部分留給客戶端。”
步驟 4：簡化資料擷取
先前所需的 Next.js 特定函數（例如「getServerSideProps」和「getStaticProps」）已被棄用。 相反，只需在元件中直接透過“await”使用標準“fetch” API。 Next.js 內部擴充了 fetch ，現在您只需使用 fetch 的可選參數即可直觀地控制快取。
如果你一步步理解它，App Router 並不可怕。請向更先進、更快的 Web 應用程式開發邁出第一步。