Notre voyage pour migrer Logto SDK Sample vers Next.js 13 App Router

Introduction#

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.

Le processus de migration#

Mise en page de la page : Une nouvelle structure#

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.

Composant client#

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:

Routes API#

La transition des routes API a été aussi simple que de transférer les fichiers précédents de /pages/api à /app/api avec quelques modifications:

1. index.ts a été renommé en route.ts.
2. La fonction exportée a été renommée en GET ou un autre nom de méthode pertinent.

Composant serveur#

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:

Conclusion#

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:

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

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

En examinant ces projets, vous pouvez obtenir une compréhension plus claire des changements et des avantages introduits par cette migration.