Nasza podróż przenoszenia Logto SDK Sample do Next.js 13 App Router
Ten artykuł szczegółowo opisuje proces migracji przykładowego projektu SDK Next.js Logto do nowego Next.js 13 App Router, pokrywając kroki tworzenia nowych stron i układów, przenoszenia tras API i wykorzystania składników serwera i klienta.
SijieDeveloper
Przestań tracić tygodnie na uwierzytelnianie użytkowników
Uruchamiaj bezpieczne aplikacje szybciej z Logto. Zintegruj uwierzytelnianie użytkowników w kilka minut i skup się na swoim głównym produkcie.
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.
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.
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:
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:
