Nasza podróż przenoszenia Logto SDK Sample do Next.js 13 App Router

Wprowadzenie#

W Logto oferujemy SDK Next.js o nazwie @logto/next, któremu towarzyszy projekt próbny. Ten projekt skutecznie pokazuje, jak zintegrować Logto z Next.js przy użyciu tradycyjnego folderu "strony", oferując przykłady tras API, getServerSideProps, Client-side Fetching, a nawet runtime krawędzi.

Next.js 13 przyniósł nam przełomowy App Router (wcześniej nazywany katalogiem aplikacji), wprowadzając nowe funkcje i konwencje, które szybko zyskały popularność w społeczności deweloperów. Biorąc pod uwagę, że SDK Next.js Logto w pełni obsługuje te nowe funkcje, zainspirowało nas to do zbudowania nowego projektu próbnego, wykorzystującego ten App Router.

W tym poście przeprowadzimy Cię przez szczegóły migracji naszego starego projektu próbnego do nowego, wykorzystującego App Router. Projekt został zbudowany na bazie starego projektu próbnego i był zgodny z oficjalnym przewodnikiem migracyjnym przewodnik. Proces obejmował kilka kroków: tworzenie stron i układów, migrację tras API i wykorzystanie komponentów serwera i klienta.

Proces migracji#

Układ strony: Nowa struktura#

W naszej pierwotnej konfiguracji używaliśmy pliku _app.tsx do konfiguracji SWR fetcher, a plik index.tsx służył jako strona główna.

Z App Router, te stają się layout.tsx i page.tsx. Plik layout.tsx zawiera podstawowe informacje, a page.tsx odzwierciedla funkcjonalność starego pliku index.tsx.

Komponent klienta#

Podczas pierwszego kroku pojawił się drobny problem: ustawienie obsługi zdarzeń "onClick" dla przycisku nie powiodło się, generując komunikat o błędzie stwierdzającym, "Programy obsługi zdarzeń nie mogą być przekazywane do właściwości komponentu klienta. Jeśli potrzebujesz interaktywności, rozważ przekształcenie części tego w komponent klienta."

Aby rozwiązać ten problem, wyodrębniliśmy problematyczny fragment do osobnego komponentu i przedrostkowaliśmy plik use client:

Trasy API#

Przejście tras API było tak proste, jak przeniesienie poprzednich plików z /pages/api do /app/api z kilkoma zmianami:

1. index.ts został przemianowany na route.ts.
2. Wyeksportowaną funkcję przemianowano na GET lub inną odpowiednią nazwę metody.

Komponent serwera#

W folderze api mamy możliwość dodania funkcji server-only, które pozwalają komponentom serwera React na pobieranie danych.

W katalogu /app/api/logto/user znajduje się plik get-user.tsx:

Ta funkcja może być następnie wywołana w page.tsx:

Wnioski#

Po zakończeniu migracji stwierdziliśmy, że nasz kod i struktura są znacznie bardziej uporządkowane i intuicyjne. Mimo że wydawało się, że jest to na początku wyzwanie, proces nie był wcale przerażający. Mamy nadzieję, że nasze doświadczenia mogą służyć jako cenny przewodnik, pomagając Ci z ufnością przenosić swoje projekty do App Router.

W celu porównania, oto linki do naszych projektów, zarówno przed jak i po migracji:

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

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

Przez badanie tych projektów możesz lepiej zrozumieć zmiany i korzyści wprowadzone przez tę migrację.