Unsere Reise zur Migration des Logto SDK Samples zu Next.js 13 App Router
Dieser Artikel beschreibt den Prozess der Migration des Next.js SDK-Beispielprojekts von Logto zum neuen Next.js 13 App Router, einschließlich der Schritte zur Erstellung neuer Seiten und Layouts, der Überleitung von API-Routen und der Nutzung von Server- und Client-Komponenten.
SijieDeveloper
Verschwenden Sie keine Wochen mit Benutzerauthentifizierung
Bringen Sie sichere Apps schneller mit Logto auf den Markt. Integrieren Sie Benutzerauthentifizierung in Minuten und konzentrieren Sie sich auf Ihr Kernprodukt.
Bei Logto bieten wir ein Next.js SDK namens @logto/next, begleitet von einem Beispielprojekt. Dieses Projekt zeigt effektiv, wie man Logto mit Next.js unter Verwendung des traditionellen "pages"-Ordners integriert und bietet Beispiele für API-Routen, getServerSideProps, Client-seitiges Abrufen und sogar Edge Runtime.
Next.js 13 brachte uns den bahnbrechenden App Router (früher App-Verzeichnis genannt), der neue Funktionen und Konventionen einführte, die schnell in der Entwicklergemeinde populär wurden. Angesichts der Tatsache, dass das Next.js SDK von Logto diese neuen Funktionen voll unterstützt, wurden wir inspiriert, ein neues Beispielprojekt mit diesem App Router zu erstellen.
In diesem Beitrag führen wir Sie durch die Details der Migration unseres alten Beispielprojekts zum neuen mit dem App Router. Das Projekt wurde auf dem alten Beispielprojekt aufgebaut und folgte dem offiziellen Migrations-Leitfaden. Der Prozess umfasste mehrere Schritte: Erstellung von Seiten und Layouts, Migration von API-Routen und Nutzung von Server- und Client-Komponenten.
In unserer ursprünglichen Einrichtung haben wir eine _app.tsx Datei für die Einrichtung des SWR Fetchers und eine index.tsx Datei als Startseite verwendet.
Mit dem App-Router werden diese als layout.tsx und page.tsx benannt. Die layout.tsx Datei enthält die Kerninformationen, während die page.tsx die Funktionen der alten index.tsx Datei widerspiegelt.
Ein Problem stellte sich während des ersten Schritts: Die Einstellung eines "onClick"-Handlers für die Schaltfläche war erfolglos und lieferte eine Fehlermeldung, die besagte: "Event Handler können nicht an Client Component Props weitergereicht werden. Wenn Sie Interaktivität benötigen, ziehen Sie in Erwägung, einen Teil davon in eine Client-Komponente umzuwandeln."
Um dieses Problem zu beheben, haben wir den problematischen Abschnitt in eine separate Komponente extrahiert und die Datei mit use client präfixiert:
Nach Abschluss der Migration stellten wir fest, dass unser Code und unsere Struktur deutlich übersichtlicher und intuitiver waren. Obwohl es anfangs herausfordernd schien, war der Prozess weit davon entfernt, einschüchternd zu sein. Wir hoffen, dass unsere Erfahrung als wertvoller Leitfaden dienen kann, der Ihnen hilft, Ihre Projekte mit Zuversicht auf den App Router zu migrieren.
Zum Vergleich sind hier die Links zu unseren Projekten, sowohl vor als auch nach der Migration:
Durch die Untersuchung dieser Projekte können Sie ein klareres Verständnis für die Änderungen und Vorteile, die diese Migration mit sich brachte, gewinnen.
