简体中文
  • nextjs
  • sdk
  • app-router

我们将 Logto SDK 示例迁移到 Next.js 13 App Router 的旅程

本文详细介绍了将 Logto 的 Next.js SDK 示例项目迁移到新的 Next.js 13 App Router 的过程,涵盖了创建新页面和布局、转换 API 路由、利用服务器和客户端组件的步骤。

Sijie
Sijie
Developer

介绍

在 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.tsxpage.tsxlayout.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 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

通过研究这些项目,你可以更清楚地了解这次迁移带来的变化以及引入的优点。