Nuestra migración del ejemplo de SDK de Logto a Next.js 13 App Router
Este artículo detalla el proceso de migración del proyecto de ejemplo del SDK de Next.js de Logto al nuevo Next.js 13 App Router, abarcando los pasos de creación de nuevas páginas y diseños, transición de rutas API y uso de componentes de servidor y cliente.
SijieDeveloper
Deja de perder semanas en la autenticación de usuarios
Lanza aplicaciones seguras más rápido con Logto. Integra la autenticación de usuarios en minutos y concéntrate en tu producto principal.
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.
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.
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:
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:
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:
