Il nostro viaggio di migrazione del Sample SDK di Logto a Next.js 13 App Router

Introduzione#

Presso Logto, offriamo un SDK Next.js chiamato @logto/next, accompagnato da un progetto di esempio. Questo progetto dimostra efficacemente come integrare Logto con Next.js utilizzando la tradizionale cartella "pagine", offrendo esempi di rotte API, getServerSideProps, recupero da client-side e persino runtime edge.

Next.js 13 ci ha portato la rivoluzionaria App Router (precedentemente chiamata directory app), introducendo nuove funzionalità e convenzioni che sono diventate rapidamente popolari nella comunità degli sviluppatori. Dato che l'SDK Next.js di Logto supporta pienamente queste nuove funzionalità, siamo stati ispirati a costruire un nuovo progetto di esempio utilizzando questo App Router.

In questo post, ti guideremo attraverso i dettagli della migrazione del nostro vecchio progetto di esempio al nuovo utilizzando l'App Router. Il progetto è stato costruito sulla base del vecchio progetto di esempio e ha seguito la guida ufficiale alla migrazione guida. Il processo ha comportato diversi passaggi: creazione di pagine e layout, migrazione delle rotte API e utilizzo di componenti lato server e lato client.

Il processo di migrazione#

Layout delle pagine: una nuova struttura#

Nella nostra configurazione originale, abbiamo utilizzato un file _app.tsx per configurare il fetcher SWR e un file index.tsx servito come home page.

Con l'App Router, questi diventano layout.tsx e page.tsx. Il file layout.tsx contiene le informazioni di base, mentre page.tsx rispecchia la funzionalità del vecchio file index.tsx.

Componente client#

Un intoppo è sorto durante il primo passaggio: impostare un gestore "onClick" per il pulsante non ha avuto successo, restituendo un messaggio di errore che diceva, "I gestori di eventi non possono essere passati alle prop del Componente Client. Se hai bisogno di interattività, prendi in considerazione la possibilità di convertire parte di questa in un Componente Client."

Per risolvere questo problema, abbiamo estratto la sezione problematica in un componente separato e prefissato il file con use client:

Rotte API#

La transizione delle rotte API è stata semplice come trasferire i file precedenti da /pages/api a /app/api con alcune modifiche:

1. index.ts è stato rinominato in route.ts.
2. La funzione esportata è stata rinominata in GET o un altro nome di metodo pertinente.

Componente del server#

All'interno della cartella api, abbiamo la possibilità di aggiungere funzioni solo-server, che permettono ai Componenti del Server React di recuperare i dati.

Nella directory /app/api/logto/user, c'è un file get-user.tsx:

Questa funzione può quindi essere invocata in page.tsx:

Conclusione#

Dopo aver completato la migrazione, abbiamo trovato il nostro codice e la nostra struttura significativamente più snelli e intuitivi. Anche se sembrava sfidante all'inizio, il processo è stato tutt'altro che scoraggiante. Speriamo che la nostra esperienza possa fungere da guida preziosa, aiutandoti a migrare con fiducia i tuoi progetti all'App Router.

Per confronto, ecco i collegamenti ai nostri progetti, sia prima che dopo la migrazione:

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

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

Esaminando questi progetti, puoi ottenere una comprensione più chiara delle modifiche e dei vantaggi introdotti da questa migrazione.