"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "johdanto", "hProperties": { "id": "johdanto" } }, "depth": 2, "value": "Johdanto" }, { "data": { "id": "siirtoprosessi", "hProperties": { "id": "siirtoprosessi" } }, "depth": 2, "value": "Siirtoprosessi" }, { "data": { "id": "sivupohja-uusi-rakenne", "hProperties": { "id": "sivupohja-uusi-rakenne" } }, "depth": 3, "value": "Sivupohja: Uusi rakenne" }, { "data": { "id": "asiakaskomponentti", "hProperties": { "id": "asiakaskomponentti" } }, "depth": 3, "value": "Asiakaskomponentti" }, { "data": { "id": "api-reitit", "hProperties": { "id": "api-reitit" } }, "depth": 3, "value": "API-reitit" }, { "data": { "id": "palvelinkomponentti", "hProperties": { "id": "palvelinkomponentti" } }, "depth": 3, "value": "Palvelinkomponentti" }, { "data": { "id": "johtopäätös", "hProperties": { "id": "johtopäätös" } }, "depth": 2, "value": "Johtopäätös" }]; const readingTime = { "minutes": 2, "words": 537, "text": "2 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "johdanto", children: ["Johdanto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#johdanto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Logtossa tarjoamme Next.js SDK:n nimeltään ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), ", johon liittyy ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "esimerkkiprojekti" }), ". Tämä projekti osoittaa tehokkaasti, kuinka integroida Logto Next.js:iin käyttämällä perinteistä \"pages\"-kansiota, tarjoten esimerkkejä API-reiteistä, ", _jsx(_components.code, { children: "getServerSideProps" }), ", asiakaspuolen hakemisesta ja jopa edge-ajosta."] }), "\n", _jsxs(_components.p, { children: ["Next.js 13 toi mukanaan mullistavan ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "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."] }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "opasta" }), ". Prosessi sisälsi useita vaiheita: sivujen ja layoutien luominen, API-reittien siirtäminen ja palvelin- sekä asiakasosien hyödyntäminen."] }), "\n", _jsx(LogtoCloudButton, { children: "Kokeile Logto Cloud -esikatselua integroidaksesi Next.js 13:een" }), "\n", _jsxs(_components.h2, { id: "siirtoprosessi", children: ["Siirtoprosessi", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#siirtoprosessi", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "sivupohja-uusi-rakenne", children: ["Sivupohja: Uusi rakenne", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sivupohja-uusi-rakenne", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Alkuperäisessä kokoonpanossamme käytimme ", _jsx(_components.code, { children: "_app.tsx" }), "-tiedostoa SWR-fetcherin asettamiseen ja ", _jsx(_components.code, { children: "index.tsx" }), "-tiedosto toimi kotisivuna."] }), "\n", _jsxs(_components.p, { children: ["App Routerin myötä näistä tulee ", _jsx(_components.code, { children: "layout.tsx" }), " ja ", _jsx(_components.code, { children: "page.tsx" }), ". ", _jsx(_components.code, { children: "layout.tsx" }), "-tiedosto sisältää ydintiedot, kun taas ", _jsx(_components.code, { children: "page.tsx" }), " peilaa vanhan ", _jsx(_components.code, { children: "index.tsx" }), "-tiedoston toiminnallisuutta."] }), "\n", _jsxs(_components.h3, { id: "asiakaskomponentti", children: ["Asiakaskomponentti", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#asiakaskomponentti", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "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.\"" }), "\n", _jsxs(_components.p, { children: ["Tämän korjaamiseksi erotimme ongelmallisen osion erilliseksi komponentiksi ja prefiksoimme tiedoston ", _jsx(_components.code, { children: "use client" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\ntype Props = {\n isAuthenticated: boolean;\n};\n\nconst Nav = ({ isAuthenticated }: Props) => {\n return (\n \n );\n};\n\nexport default Nav;\n" }) }), "\n", _jsxs(_components.h3, { id: "api-reitit", children: ["API-reitit", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#api-reitit", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["API-reittien siirtäminen oli yhtä helppoa kuin aiempien tiedostojen siirtäminen ", _jsx(_components.code, { children: "/pages/api" }), "-kansiosta ", _jsx(_components.code, { children: "/app/api" }), "-kansioon muutamilla muutoksilla:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), " nimettiin uudelleen ", _jsx(_components.code, { children: "route.ts" }), ":ksi."] }), "\n", _jsxs(_components.li, { children: ["Viety funktio nimettiin uudelleen ", _jsx(_components.code, { children: "GET" }), ":ksi tai jollain muulla sopivalla metodin nimellä."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "palvelinkomponentti", children: ["Palvelinkomponentti", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#palvelinkomponentti", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "api" }), "-kansiossa meillä on mahdollisuus lisätä ", _jsx(_components.code, { children: "server-only" }), "-funktioita, jotka sallivat React palvelinkomponenttien hakea tietoja."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "/app/api/logto/user" }), "-hakemistossa on ", _jsx(_components.code, { children: "get-user.tsx" }), "-tiedosto:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { type LogtoContext } from '@logto/next';\nimport { cookies } from 'next/headers';\n\n// `server-only` takaa, että kaikki moduulit, jotka tuovat koodia tiedostossa\n// eivät koskaan suoriteta asiakkaalla. Vaikka tämä erityinen API\n// ei tällä hetkellä käytä arkaluontoisia ympäristömuuttujia, on\n// hyvä tapa lisätä `server-only` ennaltaehkäisevästi.\n// eslint-disable-next-line import/no-unassigned-import\nimport 'server-only';\nimport { config } from '../../../../libraries/config';\n\nexport async function getUser() {\n const response = await fetch(`${config.baseUrl}/api/logto/user`, {\n cache: 'no-store',\n headers: {\n cookie: cookies().toString(),\n },\n });\n\n if (!response.ok) {\n throw new Error('Jotain meni pieleen!');\n }\n\n // eslint-disable-next-line no-restricted-syntax\n const user = (await response.json()) as LogtoContext;\n\n return user;\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Tätä funktiota voidaan sitten kutsua ", _jsx(_components.code, { children: "page.tsx" }), "-tiedostossa:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { getUser } from './api/logto/user/get-user';\nimport Nav from './nav';\n\nconst Page = async () => {\n const user = await getUser();\n\n return (\n

Hei Logto.

\n );\n}\n\nexport default Page.\n" }) }), "\n", _jsxs(_components.h2, { id: "johtopäätös", children: ["Johtopäätös", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#johtopäätös", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsx(_components.p, { children: "Vertailun vuoksi, tässä ovat linkit projekteihimme ennen ja jälkeen siirron:" }), "\n", _jsxs(_components.p, { children: ["Ennen: ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "https://github.com/logto-io/js/tree/master/packages/next-sample" })] }), "\n", _jsxs(_components.p, { children: ["Jälkeen: ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample", children: "https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample" })] }), "\n", _jsx(_components.p, { children: "Näitä projekteja tarkastelemalla voit saada selkeämmän käsityksen muutoksista ja eduista, joita tämä siirto toi mukanaan." }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "Kokeile Logto Cloud -esikatselua integroidaksesi Next.js 13:een" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }