Tässä artikkelissa kuvataan Logton Next.js SDK:n esimerkkiprojektin siirtämisprosessi uuteen Next.js 13 App Routeriin, kattaen uusien sivujen ja layoutien luomisen, API-reittien siirtämisen sekä palvelin- ja asiakasosien hyödyntämisen.
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.
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.
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:
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:
