繁體中文（台灣）
我們的遷移旅程：將 Logto SDK 範例遷移至 Next.js 13 應用程式路由
本文詳細介紹了將 Logto 的 Next.js SDK 範例專案遷移到新的 Next.js 13 應用程式路由的過程，涵蓋了創建新頁面和佈局、轉換 API 路由以及使用服務器和客戶端組件的步驟。
Sijie
Developer
Developer
本文詳細介紹了將 Logto 的 Next.js SDK 範例專案遷移到新的 Next.js 13 應用程式路由的過程，涵蓋了創建新頁面和佈局、轉換 API 路由以及使用服務器和客戶端組件的步驟。
在 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 路由相對簡單：只需將之前的文件從 /pages/api 移至 /app/api，並進行少許調整：
index.ts 被重命名為 route.ts。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
通過檢查這些專案，你可以更清晰地了解此次遷移帶來的變革和利益。