Notre voyage pour migrer Logto SDK Sample vers Next.js 13 App Router
Cet article détaille le processus de migration du projet d'échantillon SDK Next.js de Logto vers le nouveau routeur d'application Next.js 13, couvrant les étapes de création de nouvelles pages et mises en page, la transition des routes API, et l'utilisation de composants serveur et client.
SijieDeveloper
Arrêtez de perdre des semaines sur l'authentification des utilisateurs
Lancez des applications sécurisées plus rapidement avec Logto. Intégrez l'authentification des utilisateurs en quelques minutes et concentrez-vous sur votre produit principal.
Chez Logto, nous proposons un SDK Next.js nommé @logto/next, accompagné d'un projet d'échantillon. Ce projet démontre efficacement comment intégrer Logto avec Next.js en utilisant le dossier "pages" traditionnel, offrant des exemples de routes API, getServerSideProps, Fetching côté client, et même runtime de bord.
Next.js 13 nous a apporté le révolutionnaire App Router (auparavant appelé le répertoire d'applications), introduisant de nouvelles fonctionnalités et conventions qui sont rapidement devenues populaires dans la communauté des développeurs. Étant donné que le SDK Next.js de Logto prend entièrement en charge ces nouvelles fonctionnalités, nous avons été inspirés pour construire un nouveau projet d'échantillon utilisant ce routeur d'applications.
Dans cet article, nous vous guiderons à travers les détails de la migration de notre ancien projet d'échantillon vers le nouveau en utilisant le routeur d'applications. Le projet a été construit sur l'ancien projet d'échantillon et a suivi le guide officiel de migration guide. Le processus a impliqué plusieurs étapes : création de pages et mises en page, migration des routes API, et utilisation des composants serveur et client.
Dans notre configuration initiale, nous avons utilisé un fichier _app.tsx pour configurer le fetcher SWR et un fichier index.tsx qui servait de page d'accueil.
Avec le routeur d'applications, ceux-ci deviennent layout.tsx et page.tsx. Le fichier layout.tsx contient les informations principales, tandis que page.tsx reflète la fonctionnalité de l'ancien fichier index.tsx.
Un problème est survenu lors de la première étape : la définition d'un gestionnaire "onClick" pour le bouton a été infructueuse, produisant un message d'erreur indiquant, "Les gestionnaires d'événements ne peuvent pas être passés aux props du composant client. Si vous avez besoin d'interactivité, envisagez de convertir une partie de cela en un composant client."
Pour remédier à ce problème, nous avons extrait la section problématique dans un composant séparé et préfixé le fichier avec use client:
Dans le dossier api, nous avons la possibilité d'ajouter des fonctions server-only, qui permettent aux composants React Server de récupérer des données.
Dans le répertoire /app/api/logto/user, il y a un fichier get-user.tsx:
Cette fonction peut ensuite être invoquée dans page.tsx:
Après avoir terminé la migration, nous avons trouvé notre code et notre structure beaucoup plus rationalisés et intuitifs. Bien que cela semble difficile au début, le processus était loin d'être décourageant. Nous espérons que notre expérience pourra servir de guide précieux, vous aidant à migrer vos projets vers le routeur d'applications en toute confiance.
Pour comparaison, voici les liens vers nos projets, avant et après la migration:
