Vår resa med att migrera Logto SDK-exempel till Next.js 13 App Router

Inledning#

På Logto erbjuder vi ett Next.js SDK med namnet @logto/next, tillsammans med ett exempelprojekt. Detta projekt visar effektivt hur man integrerar Logto med Next.js med hjälp av den traditionella "pages"-mappen och ger exempel på API-rutter, getServerSideProps, klient-sidehämtning och till och med edge-runtime.

Next.js 13 gav oss den banbrytande App Router (tidigare kallad appdirectory), som introducerade nya funktioner och konventioner som snabbt blev populära i utvecklargemenskapen. Eftersom Logtos Next.js SDK fullt ut stödjer dessa nya funktioner blev vi inspirerade att bygga ett nytt exempelprojekt som använder denna App Router.

I detta inlägg kommer vi att guida dig genom detaljerna i att migrera vårt gamla exempelprojekt till det nya med hjälp av App Router. Projektet byggdes på det gamla exempelprojektet och följde den officiella migreringsguiden. Processen involverade flera steg: skapa sidor och layouter, migrera API-rutter och använda server- och klientkomponenter.

Migrationsprocessen#

Sidlayout: En ny struktur#

I vår ursprungliga installation använde vi en _app.tsx-fil för att ställa in SWR-hämtaren och en index.tsx-fil som tjänade som startsida.

Med App Router blir dessa layout.tsx och page.tsx. layout.tsx-filen innehåller kärninformationen, medan page.tsx speglar funktionaliteten i den gamla index.tsx-filen.

Klientkomponent#

Ett problem uppstod under det första steget: att ställa in en "onClick"-hanterare för knappen lyckades inte, vilket gav ett felmeddelande som säger: "Event handlers cannot be passed to Client Component props. If you need interactivity, consider converting part of this to a Client Component."

För att åtgärda detta problem extraherade vi den problematiska sektionen till en separat komponent och förledde filen med use client:

API-rutter#

Övergången av API-rutterna var lika enkel som att överföra de tidigare filerna från /pages/api till /app/api med några få justeringar:

1. index.ts döptes om till route.ts.
2. Den exporterade funktionen döptes om till GET eller ett annat relevant metodnamn.

Serverkomponent#

Inom api-mappen har vi möjlighet att lägga till server-only-funktioner, som tillåter React Server Components att hämta data.

I /app/api/logto/user-katalogen finns en get-user.tsx-fil:

Denna funktion kan sedan anropas i page.tsx:

Slutsats#

Efter att ha slutfört migrationen fann vi vår kod och struktur avsevärt mer strömlinjeformad och intuitiv. Även om det verkade utmanande från början, var processen långt ifrån skrämmande. Vi hoppas att vår erfarenhet kan fungera som en värdefull guide, som hjälper dig att med självförtroende migrera dina projekt till App Router.

För jämförelse, här är länkarna till våra projekt, både före och efter migrationen:

Före: https://github.com/logto-io/js/tree/master/packages/next-sample

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

Genom att granska dessa projekt kan du få en tydligare förståelse för de förändringar och fördelar som introducerades genom denna migration.