我们将 Logto SDK 示例迁移到 Next.js 13 App Router 的旅程
本文详细介绍了将 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 路由
转变 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
通过研究这些项目,你可以更清楚地了解这次迁移带来的变化以及引入的优点。