隨著 Next.js App Router 的發布，許多開發者都渴望遷移他們現有的專案。在這篇文章中，我將分享我將專案遷移到 Next.js App Router 的經驗，包括主要挑戰、變更以及如何使流程更加順利。

這是一種增量方法，您可以同時使用頁面路由器和應用程式路由器。

為什麼要遷移到 Next.js App Router？

App Router 帶來了幾個優點：

• 改進的路由：更清晰的基於檔案系統的路由。
• 伺服器端渲染 (SSR) 增強功能：更有效處理伺服器端資料。
• 元處理：簡化的 SEO 管理。
• 改進的性能：針對各種組件的內建最佳化。

透過遷移，您可以讓您的應用程式面向未來，以利用最新的 Next.js 功能。

遷移到 App Router 的步驟

• 更新依賴關係

第一步是確保您的 Next.js 和相關依賴項是最新的。執行以下命令安裝最新版本的 Next.js 和 React：

npm install next@latest react@latest react-dom@latest
npm install -D eslint-config-next@latest

• 建置應用程式資料夾

App Router 依賴新的應用程式目錄來管理路由、元資料和佈局。以下是如何建造它：

應用程式資料夾：將頁面移至應用程式資料夾。現在，每個路由都有自己的專用資料夾，其中包含 page.tsx 檔案。

佈局：新增layout.tsx 檔案來定義應用程式特定部分的佈局。這對於處理導覽列或頁腳等共用元件特別有用。

• 路由器更改

最重要的變化之一是將 next/router 替換為 next/navigation，用於路由和導航功能。

將所有 next/router 匯入替換為 next/navigation。
在適當的情況下使用新的等效項更新 useRouter 等函數，例如 usePathname、useSearchParams 和 useRouter()。

• 重構伺服器端程式碼

getServerSideProps 和 getStaticProps 在 App Router 中已棄用。
使用非同步伺服器元件或伺服器操作在伺服器端頁面中取得資料。

export async function getData() {
  const res = await fetch('https://getData.com/data');
  return res.json();
}

• 處理客戶端元件

客戶端元件：
任何使用 React hooks、瀏覽器 API 或使用者互動的元件都必須標記為「使用客戶端」。這告訴 Next.js 在客戶端渲染它們。

伺服器元件：
任何不需要與瀏覽器互動的元件都可以保留為伺服器元件。這些更加高效，因為它們避免了向客戶端發送不必要的 JavaScript。

• 處理外部庫

如果您正在使用 React Query、AntDesign 或 Framer 等外部函式庫。您需要更新它們並根據需要進行更改。無法在此部落格中包含所有變更。儘管他們的文檔中提到了更改。

遷移過程中常見的挑戰

• 路由器事件處理：

隨著從 next/router 到 next/navigation 的更改，處理路由器事件可能需要不同的方法。
確保相應地更新任何路由器事件偵聽器或掛鉤。

• 佈局轉換問題：

遷移具有複雜佈局的頁面（尤其是具有動畫的頁面）時，您可能會注意到佈局發生變化。新增佔位符或在伺服器端本身保持正確對齊以防止佈局變更。

• 圖片與連結元件更新：

App Router 引入了對圖片和連結組件的變更。
使用codemods自動更新組件。
對於影像組件，刪除已棄用的屬性，例如responsive.

• 動畫

動畫相關元件，如framer、swiper和lootie檔案需要保存在客戶端。

結論

遷移到 Next.js App Router 帶來了挑戰，但也帶來了效能、可擴展性和靈活性方面的顯著改進。透過將遷移分解為可管理的部分（應用程式層級、頁面層級和功能更新），我能夠系統地處理每個變更。

如果您對自己的遷移有任何疑問或提示，請告訴我！