Nuestra migración del ejemplo de SDK de Logto a Next.js 13 App Router

Introducción#

En Logto, ofrecemos un SDK de Next.js llamado @logto/next, acompañado de un proyecto de ejemplo. Este proyecto demuestra efectivamente cómo integrar Logto con Next.js usando la carpeta tradicional "pages", ofreciendo ejemplos de rutas API, getServerSideProps, Fetching del lado del cliente e incluso tiempo de ejecución en borde.

Next.js 13 nos trajo el revolucionario App Router (antes llamado directorio de aplicaciones), introduciendo nuevas características y convenciones que rápidamente se volvieron populares en la comunidad de desarrolladores. Dado que el SDK de Next.js de Logto apoya totalmente estas nuevas características, nos inspiró a construir un nuevo proyecto de ejemplo utilizando este App Router.

En esta publicación, te guiamos a través de los detalles de migrar nuestro viejo proyecto de ejemplo al nuevo utilizando el App Router. El proyecto se construyó sobre el antiguo proyecto de ejemplo y siguió la guía oficial de migración guía. El proceso involucró varios pasos: creación de páginas y diseños, migración de rutas API y uso de componentes de servidor y cliente.

El proceso de migración#

Diseño de página: Una nueva estructura#

En nuestra configuración original, utilizamos un archivo _app.tsx para configurar el buscador de SWR y un archivo index.tsx servía como la página de inicio.

Con el App Router, estos se convierten en layout.tsx y page.tsx. El archivo layout.tsx contiene la información central, mientras que page.tsx refleja la funcionalidad del antiguo archivo index.tsx.

Componente del cliente#

Un contratiempo surgió durante el primer paso: configurar un controlador "onClick" para el botón no fue exitoso, resultando en un mensaje de error que decía, "Los controladores de eventos no pueden ser pasados a las propiedades de Componente del Cliente. Si necesita interactividad, considere convertir parte de esto en un Componente del Cliente."

Para solucionar este problema, extrajimos la sección problemática en un componente separado y prefijamos el archivo con use client:

Rutas API#

La transición de las rutas API fue tan simple como transferir los archivos anteriores de /pages/api a /app/api con algunos ajustes:

1. index.ts se renombró a route.ts.
2. La función exportada se renombró a GET o a otro nombre de método relevante.

Componente del servidor#

Dentro de la carpeta api, tenemos la capacidad de agregar funciones solo para servidores, que permiten que los Componentes de Servidor de React obtengan datos.

En el directorio /app/api/logto/user, hay un archivo get-user.tsx:

Esta función puede ser invocada en page.tsx:

Conclusión#

Al completar la migración, encontramos nuestro código y estructura significativamente más simplificados e intuitivos. Aunque parecía desafiante al principio, el proceso estaba lejos de ser desalentador. Esperamos que nuestra experiencia pueda servir como una guía valiosa, ayudándote a migrar con confianza tus proyectos al App Router.

Para comparar, aquí están los enlaces a nuestros proyectos, tanto antes como después de la migración:

Antes: https://github.com/logto-io/js/tree/master/packages/next-sample

Después: https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample

Examinando estos proyectos, puedes obtener una comprensión más clara de los cambios y beneficios introducidos por esta migración.