Unsere Reise zur Migration des Logto SDK Samples zu Next.js 13 App Router

Einleitung#

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.

Der Migrationsprozess#

Seitenlayout: Eine neue Struktur#

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.

Client-Komponente#

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:

API-Routen#

Der Übergang der API-Routen war so einfach wie die Übertragung der vorherigen Dateien von /pages/api nach /app/api mit einigen Anpassungen:

1. index.ts wurde in route.ts umbenannt.
2. Die exportierte Funktion wurde in GET oder einen anderen relevanten Methodennamen umbenannt.

Serverkomponente#

In dem api-Ordner haben wir die Möglichkeit, server-only Funktionen hinzuzufügen, die es React Server Components ermöglichen, Daten abzurufen.

Im Verzeichnis /app/api/logto/user gibt es eine get-user.tsx Datei:

Diese Funktion kann dann in page.tsx aufgerufen werden:

Schlussfolgerung#

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:

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

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

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.