Matkamme Logto SDK -näytteen siirtämisessä Next.js 13 App Routeriin

Johdanto#

Logtossa tarjoamme Next.js SDK:n nimeltään @logto/next, johon liittyy esimerkkiprojekti. Tämä projekti osoittaa tehokkaasti, kuinka integroida Logto Next.js:iin käyttämällä perinteistä "pages"-kansiota, tarjoten esimerkkejä API-reiteistä, getServerSideProps, asiakaspuolen hakemisesta ja jopa edge-ajosta.

Next.js 13 toi mukanaan mullistavan App Routerin (aiemmin kutsuttu app-hakemistoksi), esitellen uusia ominaisuuksia ja konventioita, jotka nopeasti saavuttivat suosiota kehittäjäyhteisössä. Koska Logton Next.js SDK tukee täysin näitä uusia ominaisuuksia, inspiroiduimme rakentamaan uuden esimerkkiprojektin, joka hyödyntää tätä App Routeria.

Tässä postauksessa käymme läpi yksityiskohtaisesti, kuinka siirsimme vanhan esimerkkiprojektimme uuteen käyttäen App Routeria. Projekti rakennettiin vanhan esimerkkiprojektin pohjalta ja seurasi virallista siirto-opasta opasta. Prosessi sisälsi useita vaiheita: sivujen ja layoutien luominen, API-reittien siirtäminen ja palvelin- sekä asiakasosien hyödyntäminen.

Siirtoprosessi#

Sivupohja: Uusi rakenne#

Alkuperäisessä kokoonpanossamme käytimme _app.tsx-tiedostoa SWR-fetcherin asettamiseen ja index.tsx-tiedosto toimi kotisivuna.

App Routerin myötä näistä tulee layout.tsx ja page.tsx. layout.tsx-tiedosto sisältää ydintiedot, kun taas page.tsx peilaa vanhan index.tsx-tiedoston toiminnallisuutta.

Asiakaskomponentti#

Yksi kompastuskivi ilmeni ensimmäisessä vaiheessa: "onClick"-käsittelijän asettaminen painikkeelle epäonnistui, antaen virhesanoman: "Event handlers cannot be passed to Client Component props. If you need interactivity, consider converting part of this to a Client Component."

Tämän korjaamiseksi erotimme ongelmallisen osion erilliseksi komponentiksi ja prefiksoimme tiedoston use client:

API-reitit#

API-reittien siirtäminen oli yhtä helppoa kuin aiempien tiedostojen siirtäminen /pages/api-kansiosta /app/api-kansioon muutamilla muutoksilla:

1. index.ts nimettiin uudelleen route.ts:ksi.
2. Viety funktio nimettiin uudelleen GET:ksi tai jollain muulla sopivalla metodin nimellä.

Palvelinkomponentti#

api-kansiossa meillä on mahdollisuus lisätä server-only-funktioita, jotka sallivat React palvelinkomponenttien hakea tietoja.

/app/api/logto/user-hakemistossa on get-user.tsx-tiedosto:

Tätä funktiota voidaan sitten kutsua page.tsx-tiedostossa:

Johtopäätös#

Siirron valmistuttua huomasimme koodimme ja rakenteemme olevan merkittävästi virtaviivaisempia ja intuitiivisempia. Vaikka prosessi aluksi vaikutti haastavalta, se ei ollut lainkaan pelottavaa. Toivomme, että kokemuksemme voi toimia arvokkaana oppaana, auttaen sinua siirtämään projektejasi luottavaisin mielin App Routeriin.

Vertailun vuoksi, tässä ovat linkit projekteihimme ennen ja jälkeen siirron:

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

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

Näitä projekteja tarkastelemalla voit saada selkeämmän käsityksen muutoksista ja eduista, joita tämä siirto toi mukanaan.