Vår resa med att migrera Logto SDK-exempel till Next.js 13 App Router
Den här artikeln beskriver processen för att migrera Logtos Next.js SDK-exempelprojekt till den nya Next.js 13 App Router, inklusive stegen för att skapa nya sidor och layouter, överföra API-rutter och använda server- och klientkomponenter.
SijieDeveloper
Sluta slösa veckor på användarautentisering
Lansera säkra appar snabbare med Logto. Integrera användarautentisering på några minuter och fokusera på din kärnprodukt.
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.
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.
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:
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:
