"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "inleiding", "hProperties": { "id": "inleiding" } }, "depth": 2, "value": "Inleiding" }, { "data": { "id": "het-migratieproces", "hProperties": { "id": "het-migratieproces" } }, "depth": 2, "value": "Het migratieproces" }, { "data": { "id": "paginalay-out-een-nieuwe-structuur", "hProperties": { "id": "paginalay-out-een-nieuwe-structuur" } }, "depth": 3, "value": "Paginalay-out: Een nieuwe structuur" }, { "data": { "id": "clientcomponent", "hProperties": { "id": "clientcomponent" } }, "depth": 3, "value": "Clientcomponent" }, { "data": { "id": "api-routes", "hProperties": { "id": "api-routes" } }, "depth": 3, "value": "API-routes" }, { "data": { "id": "servercomponent", "hProperties": { "id": "servercomponent" } }, "depth": 3, "value": "Servercomponent" }, { "data": { "id": "conclusie", "hProperties": { "id": "conclusie" } }, "depth": 2, "value": "Conclusie" }]; const readingTime = { "minutes": 2, "words": 687, "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: "inleiding", children: ["Inleiding", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inleiding", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Bij Logto bieden we een Next.js SDK aan genaamd ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), ", vergezeld door een ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "voorbeeldproject" }), ". Dit project demonstreert effectief hoe Logto te integreren met Next.js met behulp van de traditionele \"pages\" map, met voorbeelden van API-routes, ", _jsx(_components.code, { children: "getServerSideProps" }), ", Client-side Fetching en zelfs edge runtime."] }), "\n", _jsxs(_components.p, { children: ["Next.js 13 bracht ons de baanbrekende ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " (voorheen de app map genoemd), die nieuwe functies en conventies introduceerde die snel populair werden in de ontwikkelaarsgemeenschap. Aangezien de Next.js SDK van Logto deze nieuwe functies volledig ondersteunt, raakten we geïnspireerd om een nieuw voorbeeldproject te bouwen dat gebruikmaakt van deze App Router."] }), "\n", _jsxs(_components.p, { children: ["In dit bericht zullen we je door de details leiden van het migreren van ons oude voorbeeldproject naar de nieuwe versie met behulp van de App Router. Het project was gebaseerd op het oude voorbeeldproject en volgde de officiële migratie", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "gids" }), ". Het proces omvatte verschillende stappen: het maken van pagina's en lay-outs, het migreren van API-routes en het gebruiken van server- en clientcomponenten."] }), "\n", _jsx(LogtoCloudButton, { children: "Probeer Logto Cloud Preview om te integreren met Next.js 13" }), "\n", _jsxs(_components.h2, { id: "het-migratieproces", children: ["Het migratieproces", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#het-migratieproces", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "paginalay-out-een-nieuwe-structuur", children: ["Paginalay-out: Een nieuwe structuur", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#paginalay-out-een-nieuwe-structuur", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["In onze originele setup gebruikten we een ", _jsx(_components.code, { children: "_app.tsx" }), " bestand voor het instellen van de SWR-fetcher en een ", _jsx(_components.code, { children: "index.tsx" }), " bestand dat als startpagina diende."] }), "\n", _jsxs(_components.p, { children: ["Met de App Router worden deze ", _jsx(_components.code, { children: "layout.tsx" }), " en ", _jsx(_components.code, { children: "page.tsx" }), ". Het ", _jsx(_components.code, { children: "layout.tsx" }), " bestand bevat de kerninformatie, terwijl ", _jsx(_components.code, { children: "page.tsx" }), " de functionaliteit van het oude ", _jsx(_components.code, { children: "index.tsx" }), " bestand weerspiegelt."] }), "\n", _jsxs(_components.h3, { id: "clientcomponent", children: ["Clientcomponent", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#clientcomponent", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Een probleem deed zich voor tijdens de eerste stap: het instellen van een \"onClick\" handler voor de knop mislukte, wat een foutmelding gaf: \"Event handlers kunnen niet worden doorgegeven aan Client Component props. Als je interactiviteit nodig hebt, overweeg dan om een deel hiervan om te zetten naar een Client Component.\"" }), "\n", _jsxs(_components.p, { children: ["Om dit probleem op te lossen, hebben we het problematische gedeelte in een aparte component geëxtraheerd en het bestand voorzien van het voorvoegsel ", _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-routes", children: ["API-routes", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#api-routes", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Het overzetten van de API-routes was net zo eenvoudig als het overzetten van de vorige bestanden van ", _jsx(_components.code, { children: "/pages/api" }), " naar ", _jsx(_components.code, { children: "/app/api" }), " met een paar aanpassingen:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), " werd hernoemd naar ", _jsx(_components.code, { children: "route.ts" }), "."] }), "\n", _jsxs(_components.li, { children: ["De geëxporteerde functie werd hernoemd naar ", _jsx(_components.code, { children: "GET" }), " of een andere relevante methodenaam."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "servercomponent", children: ["Servercomponent", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#servercomponent", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["In de ", _jsx(_components.code, { children: "api" }), " map hebben we de mogelijkheid om ", _jsx(_components.code, { children: "server-only" }), " functies toe te voegen, waarmee React Server Components data kunnen ophalen."] }), "\n", _jsxs(_components.p, { children: ["In de ", _jsx(_components.code, { children: "/app/api/logto/user" }), " directory bevindt zich een ", _jsx(_components.code, { children: "get-user.tsx" }), " bestand:"] }), "\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` garandeert dat modules die code in dit bestand importeren\n// nooit op de client draaien. Hoewel deze specifieke api\n// momenteel geen gevoelige omgevingsvariabelen gebruikt,\n// is het goed om `server-only` preventief toe te voegen.\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('Er ging iets mis!');\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: ["Deze functie kan vervolgens worden aangeroepen in ", _jsx(_components.code, { children: "page.tsx" }), ":"] }), "\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

Hallo Logto.

\n );\n}\n\nexport default Page.\n" }) }), "\n", _jsxs(_components.h2, { id: "conclusie", children: ["Conclusie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Bij het voltooien van de migratie vonden we onze code en structuur aanzienlijk gestroomlijnder en intuïtiever. Hoewel het aanvankelijk uitdagend leek, was het proces verre van ontmoedigend. We hopen dat onze ervaring als een waardevolle gids kan dienen en je helpt vol vertrouwen je projecten naar de App Router te migreren." }), "\n", _jsx(_components.p, { children: "Voor vergelijking, hier zijn de links naar onze projecten, zowel voor als na de migratie:" }), "\n", _jsxs(_components.p, { children: ["Voor: ", _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: ["Na: ", _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: "Door deze projecten te onderzoeken, kun je een duidelijker begrip krijgen van de veranderingen en voordelen die deze migratie heeft gebracht." }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "Probeer Logto Cloud Preview om te integreren met Next.js 13" })] }); } 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."); }