"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "einleitung", "hProperties": { "id": "einleitung" } }, "depth": 2, "value": "Einleitung" }, { "data": { "id": "der-migrationsprozess", "hProperties": { "id": "der-migrationsprozess" } }, "depth": 2, "value": "Der Migrationsprozess" }, { "data": { "id": "seitenlayout-eine-neue-struktur", "hProperties": { "id": "seitenlayout-eine-neue-struktur" } }, "depth": 3, "value": "Seitenlayout: Eine neue Struktur" }, { "data": { "id": "client-komponente", "hProperties": { "id": "client-komponente" } }, "depth": 3, "value": "Client-Komponente" }, { "data": { "id": "api-routen", "hProperties": { "id": "api-routen" } }, "depth": 3, "value": "API-Routen" }, { "data": { "id": "serverkomponente", "hProperties": { "id": "serverkomponente" } }, "depth": 3, "value": "Serverkomponente" }, { "data": { "id": "schlussfolgerung", "hProperties": { "id": "schlussfolgerung" } }, "depth": 2, "value": "Schlussfolgerung" }]; const readingTime = { "minutes": 2, "words": 671, "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: "einleitung", children: ["Einleitung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einleitung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Bei Logto bieten wir ein Next.js SDK namens ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), ", begleitet von einem ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "Beispielprojekt" }), ". Dieses Projekt zeigt effektiv, wie man Logto mit Next.js unter Verwendung des traditionellen \"pages\"-Ordners integriert und bietet Beispiele für API-Routen, ", _jsx(_components.code, { children: "getServerSideProps" }), ", Client-seitiges Abrufen und sogar Edge Runtime."] }), "\n", _jsxs(_components.p, { children: ["Next.js 13 brachte uns den bahnbrechenden ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " (früher App-Verzeichnis genannt), der neue Funktionen und Konventionen einführte, die schnell in der Entwicklergemeinde populär wurden. Angesichts der Tatsache, dass das Next.js SDK von Logto diese neuen Funktionen voll unterstützt, wurden wir inspiriert, ein neues Beispielprojekt mit diesem App Router zu erstellen."] }), "\n", _jsxs(_components.p, { children: ["In diesem Beitrag führen wir Sie durch die Details der Migration unseres alten Beispielprojekts zum neuen mit dem App Router. Das Projekt wurde auf dem alten Beispielprojekt aufgebaut und folgte dem offiziellen Migrations-", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "Leitfaden" }), ". Der Prozess umfasste mehrere Schritte: Erstellung von Seiten und Layouts, Migration von API-Routen und Nutzung von Server- und Client-Komponenten."] }), "\n", _jsx(LogtoCloudButton, { children: "Versuchen Sie Logto Cloud Preview, um es mit Next.js 13 zu integrieren" }), "\n", _jsxs(_components.h2, { id: "der-migrationsprozess", children: ["Der Migrationsprozess", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#der-migrationsprozess", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "seitenlayout-eine-neue-struktur", children: ["Seitenlayout: Eine neue Struktur", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#seitenlayout-eine-neue-struktur", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["In unserer ursprünglichen Einrichtung haben wir eine ", _jsx(_components.code, { children: " _app.tsx" }), " Datei für die Einrichtung des SWR Fetchers und eine ", _jsx(_components.code, { children: " index.tsx" }), " Datei als Startseite verwendet."] }), "\n", _jsxs(_components.p, { children: ["Mit dem App-Router werden diese als ", _jsx(_components.code, { children: " layout.tsx" }), " und ", _jsx(_components.code, { children: " page.tsx" }), " benannt. Die ", _jsx(_components.code, { children: " layout.tsx" }), " Datei enthält die Kerninformationen, während die ", _jsx(_components.code, { children: " page.tsx" }), " die Funktionen der alten ", _jsx(_components.code, { children: " index.tsx" }), " Datei widerspiegelt."] }), "\n", _jsxs(_components.h3, { id: "client-komponente", children: ["Client-Komponente", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#client-komponente", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Ein Problem stellte sich während des ersten Schritts: Die Einstellung eines \"onClick\"-Handlers für die Schaltfläche war erfolglos und lieferte eine Fehlermeldung, die besagte: \"Event Handler können nicht an Client Component Props weitergereicht werden. Wenn Sie Interaktivität benötigen, ziehen Sie in Erwägung, einen Teil davon in eine Client-Komponente umzuwandeln.\"" }), "\n", _jsxs(_components.p, { children: ["Um dieses Problem zu beheben, haben wir den problematischen Abschnitt in eine separate Komponente extrahiert und die Datei mit ", _jsx(_components.code, { children: " use client" }), " präfixiert:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'nutzen Client';\n\ntype Props = {\n istAuthentifiziert: boolean;\n};\n\nconst Nav = ({ istAuthentifiziert }: Props) => {\n return (\n \n );\n};\n\nexport default Nav;\n" }) }), "\n", _jsxs(_components.h3, { id: "api-routen", children: ["API-Routen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#api-routen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Der Übergang der API-Routen war so einfach wie die Übertragung der vorherigen Dateien von ", _jsx(_components.code, { children: "/pages/api" }), " nach ", _jsx(_components.code, { children: "/app/api" }), " mit einigen Anpassungen:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), " wurde in ", _jsx(_components.code, { children: "route.ts" }), " umbenannt."] }), "\n", _jsxs(_components.li, { children: ["Die exportierte Funktion wurde in ", _jsx(_components.code, { children: "GET" }), " oder einen anderen relevanten Methodennamen umbenannt."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "serverkomponente", children: ["Serverkomponente", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#serverkomponente", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["In dem ", _jsx(_components.code, { children: "api" }), "-Ordner haben wir die Möglichkeit, ", _jsx(_components.code, { children: "server-only" }), " Funktionen hinzuzufügen, die es React Server Components ermöglichen, Daten abzurufen."] }), "\n", _jsxs(_components.p, { children: ["Im Verzeichnis ", _jsx(_components.code, { children: "/app/api/logto/user" }), " gibt es eine ", _jsx(_components.code, { children: "get-user.tsx" }), " Datei:"] }), "\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` garantiert, dass alle Module, die Code in Datei importieren\n// werden niemals auf dem Client ausgeführt. Auch wenn diese bestimmte API\n// derzeit keine sensiblen Umgebungsvariablen verwendet, ist es\n// gute Praxis, `server-only` präventiv hinzuzufügen.\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('Etwas ist schiefgelaufen!');\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: ["Diese Funktion kann dann in ", _jsx(_components.code, { children: "page.tsx" }), " aufgerufen werden:"] }), "\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: "schlussfolgerung", children: ["Schlussfolgerung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#schlussfolgerung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nach Abschluss der Migration stellten wir fest, dass unser Code und unsere Struktur deutlich übersichtlicher und intuitiver waren. Obwohl es anfangs herausfordernd schien, war der Prozess weit davon entfernt, einschüchternd zu sein. Wir hoffen, dass unsere Erfahrung als wertvoller Leitfaden dienen kann, der Ihnen hilft, Ihre Projekte mit Zuversicht auf den App Router zu migrieren." }), "\n", _jsx(_components.p, { children: "Zum Vergleich sind hier die Links zu unseren Projekten, sowohl vor als auch nach der Migration:" }), "\n", _jsxs(_components.p, { children: ["Vorher: ", _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: ["Nachher: ", _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: "Durch die Untersuchung dieser Projekte können Sie ein klareres Verständnis für die Änderungen und Vorteile, die diese Migration mit sich brachte, gewinnen." }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "Versuchen Sie Logto Cloud Preview, um es mit Next.js 13 zu integrieren" })] }); } 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."); }