我們的遷移旅程：將 Logto SDK 範例遷移至 Next.js 13 應用程式路由

介紹#

在 Logto，我們提供了一個名為 @logto/next 的 Next.js SDK，並隨附一個範例專案。此專案有效地展示了如何使用傳統的 "pages" 資料夾將 Logto 與 Next.js 集成，提供 API 路由、getServerSideProps、客戶端提取甚至邊緣運行時的示例。

Next.js 13 為我們帶來了突破性的 App Router（以前稱為應用程式目錄），引入了迅速在開發者社群中流行的新功能和約定。由於 Logto 的 Next.js SDK 完全支持這些新功能，我們受到啟發，創建了一個利用此 App Router 的新範例專案。

在這篇文章中，我們將帶你詳述使用 App Router 遷移我們的舊範例專案到新的樣子。專案是基於舊範例專案構建的，並遵循官方遷移指南。過程包含幾個步驟：創建頁面和佈局、遷移 API 路由以及使用服務器和客戶端組件。

遷移過程#

頁面佈局：一個新的結構#

在我們的原始設置中，我們使用 _app.tsx 文件來設置 SWR 提取器，而 index.tsx 文件作為首頁。

使用 App Router，這些文件變成了 layout.tsx 和 page.tsx。layout.tsx 文件包含核心信息，而 page.tsx 文件則反映了舊 index.tsx 文件的功能。

客戶端組件#

遷移的第一步出現了一個小問題：為按鈕設置 "onClick" 處理程序未成功，出現錯誤消息：「事件處理程序不能傳遞給客戶端組件的屬性。如果需要交互，請考慮將部分內容轉換為客戶端組件。」

為了解決此問題，我們將有問題的部分提取到一個單獨的組件中，並在文件開頭添加 use client：

API 路由#

轉換 API 路由相對簡單：只需將之前的文件從 /pages/api 移至 /app/api，並進行少許調整：

1. index.ts 被重命名為 route.ts。
2. 導出的函數被重命名為 GET 或其他相關方法名。

服務器組件#

在 api 資料夾中，我們可以添加 server-only 函數，允許 React 服務器組件提取數據。

在 /app/api/logto/user 資料夾中，有一個 get-user.tsx 文件：

然後可以在 page.tsx 中調用此函數：

結論#

完成遷移後，我們發現代碼和結構變得更加簡潔和直觀。儘管剛開始看似具有挑戰性，但過程遠非困難。我們希望我們的經驗可以作為寶貴的指南，幫助你自信地將專案遷移到 App Router。

作為對比，以下是我們專案在遷移前後的鏈接：

Before: https://github.com/logto-io/js/tree/master/packages/next-sample

After: https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample

通過檢查這些專案，你可以更清晰地了解此次遷移帶來的變革和利益。