简体中文
我们将 Logto SDK 示例迁移到 Next.js 13 App Router 的旅程
本文详细介绍了将 Logto 的 Next.js SDK 示例项目迁移到新的 Next.js 13 App Router 的过程，涵盖了创建新页面和布局、转换 API 路由、利用服务器和客户端组件的步骤。
Sijie
Developer
Developer
本文详细介绍了将 Logto 的 Next.js SDK 示例项目迁移到新的 Next.js 13 App Router 的过程，涵盖了创建新页面和布局、转换 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 fetcher，一个 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 Server 组件获取数据。
在 /app/api/logto/user 目录下，有一个 get-user.tsx 文件：
然后，这个函数可以在 page.tsx 中调用：
在完成迁移后，我们发现我们的代码和结构更为简洁和直观。尽管一开始似乎很具挑战性，但实际的过程远没有那么令人生畏。我们希望我们的经验可以作为一个有价值的指南，帮助你自信地将你的项目迁移到 App Router。
作为比较，这里有我们在迁移前后的项目的链接：
迁移前：https://github.com/logto-io/js/tree/master/packages/next-sample
迁移后：https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample
通过研究这些项目，你可以更清楚地了解这次迁移带来的变化以及引入的优点。