我們的旅程：將 Logto SDK 示例遷移到 Next.js 13 應用路由器

簡介#

在 Logto，我們提供了一個名為 @logto/next 的 Next.js SDK，並附帶一個示例項目。該項目有效地展示了如何使用傳統的 "pages" 資料夾將 Logto 集成到 Next.js 中，提供了 API 路由、getServerSideProps、客戶端提取甚至邊緣執行環境的示例。

Next.js 13 為我們帶來了突破性的 應用路由器（先前稱為應用目錄），引入了新的功能和慣例，迅速在開發者社群中流行起來。鑑於 Logto 的 Next.js SDK 完全支持這些新功能，我們受到了啟發，建立了一個利用這個應用路由器的新示例項目。

在本文中，我們將引導你詳細了解使用應用路由器將我們的舊示例項目遷移到新項目的過程。該項目是在舊示例項目基礎上建立的，並遵循官方遷移指引。過程涉及幾個步驟：創建頁面和佈局、遷移 API 路由，以及使用服務器和客戶端元件。

遷移過程#

頁面佈局：新的結構#

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

使用應用路由器後，這些成為 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 中調用這個函數：

結論#

完成遷移後，我們發現我們的代碼和結構顯著更精簡且直觀。儘管起初似乎具有挑戰性，但這個過程遠沒有想像中那麼令人生畏。我們希望我們的經驗可以作為一個有價值的指南，幫助你自信地將項目遷移到應用路由器。

為了比較，這裡有我們的項目鏈接，遷移前和遷移後的：

遷移前：https://github.com/logto-io/js/tree/master/packages/next-sample

遷移後：https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample

通過查看這些項目，你可以更清晰地了解此次遷移帶來的變化和好處。