Onze Reizen: Het Migreren van Logto SDK Voorbeeld naar Next.js 13 App Router

Inleiding#

Bij Logto bieden we een Next.js SDK aan genaamd @logto/next, vergezeld door een voorbeeldproject. Dit project demonstreert effectief hoe Logto te integreren met Next.js met behulp van de traditionele "pages" map, met voorbeelden van API-routes, getServerSideProps, Client-side Fetching en zelfs edge runtime.

Next.js 13 bracht ons de baanbrekende App Router (voorheen de app map genoemd), die nieuwe functies en conventies introduceerde die snel populair werden in de ontwikkelaarsgemeenschap. Aangezien de Next.js SDK van Logto deze nieuwe functies volledig ondersteunt, raakten we geïnspireerd om een nieuw voorbeeldproject te bouwen dat gebruikmaakt van deze App Router.

In dit bericht zullen we je door de details leiden van het migreren van ons oude voorbeeldproject naar de nieuwe versie met behulp van de App Router. Het project was gebaseerd op het oude voorbeeldproject en volgde de officiële migratiegids. Het proces omvatte verschillende stappen: het maken van pagina's en lay-outs, het migreren van API-routes en het gebruiken van server- en clientcomponenten.

Het migratieproces#

Paginalay-out: Een nieuwe structuur#

In onze originele setup gebruikten we een _app.tsx bestand voor het instellen van de SWR-fetcher en een index.tsx bestand dat als startpagina diende.

Met de App Router worden deze layout.tsx en page.tsx. Het layout.tsx bestand bevat de kerninformatie, terwijl page.tsx de functionaliteit van het oude index.tsx bestand weerspiegelt.

Clientcomponent#

Een probleem deed zich voor tijdens de eerste stap: het instellen van een "onClick" handler voor de knop mislukte, wat een foutmelding gaf: "Event handlers kunnen niet worden doorgegeven aan Client Component props. Als je interactiviteit nodig hebt, overweeg dan om een deel hiervan om te zetten naar een Client Component."

Om dit probleem op te lossen, hebben we het problematische gedeelte in een aparte component geëxtraheerd en het bestand voorzien van het voorvoegsel use client:

API-routes#

Het overzetten van de API-routes was net zo eenvoudig als het overzetten van de vorige bestanden van /pages/api naar /app/api met een paar aanpassingen:

1. index.ts werd hernoemd naar route.ts.
2. De geëxporteerde functie werd hernoemd naar GET of een andere relevante methodenaam.

Servercomponent#

In de api map hebben we de mogelijkheid om server-only functies toe te voegen, waarmee React Server Components data kunnen ophalen.

In de /app/api/logto/user directory bevindt zich een get-user.tsx bestand:

Deze functie kan vervolgens worden aangeroepen in page.tsx:

Conclusie#

Bij het voltooien van de migratie vonden we onze code en structuur aanzienlijk gestroomlijnder en intuïtiever. Hoewel het aanvankelijk uitdagend leek, was het proces verre van ontmoedigend. We hopen dat onze ervaring als een waardevolle gids kan dienen en je helpt vol vertrouwen je projecten naar de App Router te migreren.

Voor vergelijking, hier zijn de links naar onze projecten, zowel voor als na de migratie:

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

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

Door deze projecten te onderzoeken, kun je een duidelijker begrip krijgen van de veranderingen en voordelen die deze migratie heeft gebracht.