"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "einführung", "hProperties": { "id": "einführung" } }, "depth": 2, "value": "Einführung" }, { "data": { "id": "abkehr-von-rest-apis", "hProperties": { "id": "abkehr-von-rest-apis" } }, "depth": 2, "value": "Abkehr von REST-APIs" }, { "data": { "id": "die-notwendigkeit-einer-zustandslosen-sitzung", "hProperties": { "id": "die-notwendigkeit-einer-zustandslosen-sitzung" } }, "depth": 2, "value": "Die Notwendigkeit einer zustandslosen Sitzung" }, { "data": { "id": "grundlegende-sitzungsimplementierung", "hProperties": { "id": "grundlegende-sitzungsimplementierung" } }, "depth": 2, "value": "Grundlegende Sitzungsimplementierung" }, { "data": { "id": "erstellung-einer-sitzungsbibliothek", "hProperties": { "id": "erstellung-einer-sitzungsbibliothek" } }, "depth": 3, "value": "Erstellung einer Sitzungsbibliothek" }, { "data": { "id": "eingehend-zwei-weitere-server-actions", "hProperties": { "id": "eingehend-zwei-weitere-server-actions" } }, "depth": 3, "value": "Eingehend: zwei weitere Server Actions" }, { "data": { "id": "erstellung-der-seite", "hProperties": { "id": "erstellung-der-seite" } }, "depth": 2, "value": "Erstellung der Seite" }, { "data": { "id": "implementierung-der-verschlüsselung", "hProperties": { "id": "implementierung-der-verschlüsselung" } }, "depth": 2, "value": "Implementierung der Verschlüsselung" }, { "data": { "id": "fazit", "hProperties": { "id": "fazit" } }, "depth": 2, "value": "Fazit" }]; const readingTime = { "minutes": 3, "words": 999, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "einführung", children: ["Einführung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einführung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Nach dem gefeierten Release des ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Routers" }), " hat Next.js eine weitere Funktion eingeführt: ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions", children: "Server Actions" }), ". Diese neue Innovation erleichtert serverseitige Datenmanipulationen, reduziert die Abhängigkeit von clientseitigem JavaScript und verbessert progressiv Formulare – und das alles unter Verwendung von JavaScript und React, um robuste Web-Anwendungen zu erstellen, ohne traditionelle REST-APIs zu benötigen."] }), "\n", _jsx(_components.p, { children: "In diesem Artikel nutzen wir die Fülle der Vorteile dieser Innovation und setzen sie um, indem wir eine cookie-basierte zustandslose Sitzung für Next.js implementieren. Dieser Beitrag dient als schrittweise Anleitung, die dich durch jede Phase der Erstellung eines Demo-Projekts mit dem App Router führt." }), "\n", _jsxs(_components.p, { children: ["Unsere praktische Demonstration kann problemlos auf Vercel mit ", _jsx(_components.a, { href: "https://vercel.com/docs/functions/edge-functions/edge-runtime", children: "Edge Runtime" }), " bereitgestellt werden. Und du kannst den vollständigen Quellcode von ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "GitHub" }), " herunterladen."] }), "\n", _jsxs(_components.h2, { id: "abkehr-von-rest-apis", children: ["Abkehr von REST-APIs", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#abkehr-von-rest-apis", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Traditionell, wenn wir eine Next.js-Webanwendung erstellen möchten, die im Backend Datenbankabfragen stellt, erstellen wir möglicherweise einige REST-APIs, um den Authentifizierungszustand zu validieren und die Datenbank abzufragen. Dann ruft die Frontend-React-App diese APIs auf. Aber wenn keine Notwendigkeit besteht, die API der Öffentlichkeit zugänglich zu machen, und diese React-App der einzige Client ist, scheint es überflüssig, REST-APIs zu verwenden, da sie nur von uns selbst aufgerufen werden." }), "\n", _jsxs(_components.p, { children: ["Mit Server Actions kann die React-Komponente jetzt serverseitigen Code ausführen. Anstatt einen API-Endpunkt manuell erstellen zu müssen, erstellen Server Actions automatisch einen Endpunkt, den Next.js im Hintergrund verwendet. Wenn eine Server Action aufgerufen wird, sendet Next.js eine ", _jsx(_components.code, { children: "POST" }), "-Anfrage an die aktuelle Seite mit Metadaten darüber, welche Aktion ausgeführt werden soll."] }), "\n", _jsxs(_components.h2, { id: "die-notwendigkeit-einer-zustandslosen-sitzung", children: ["Die Notwendigkeit einer zustandslosen Sitzung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#die-notwendigkeit-einer-zustandslosen-sitzung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Als bevorzugtes Framework zur Erstellung zustandsloser Anwendungen bedeutet Next.js oft \"serverless\", was bedeutet, dass wir den Speicher nicht verwenden können, um Sitzungsdaten zu speichern. Traditionelle Sitzungen erfordern die Nutzung eines externen Speicher-Dienstes, wie Redis oder einer Datenbank." }), "\n", _jsx(_components.p, { children: "Wenn jedoch die Sitzungsdaten klein genug bleiben, haben wir eine alternative Möglichkeit: Wir können eine zustandslose Sitzung unter Verwendung sicherer Verschlüsselungsmethoden und Cookies, die auf der Client-Seite gespeichert werden, erstellen. Diese Methode umgeht die Notwendigkeit eines externen Speichers und hält die Sitzungsdaten dezentral, was erhebliche Vorteile hinsichtlich der Serverlast und Gesamtleistung der Anwendung bietet." }), "\n", _jsx(_components.p, { children: "Unser Ziel ist also eine leichte, effiziente zustandslose Sitzung, die die Speichermöglichkeiten der Client-Seite nutzt und gleichzeitig durch gut ausgeführte Verschlüsselung Sicherheit gewährleistet." }), "\n", _jsxs(_components.h2, { id: "grundlegende-sitzungsimplementierung", children: ["Grundlegende Sitzungsimplementierung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#grundlegende-sitzungsimplementierung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Zuerst müssen wir ein neues Projekt einleiten:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-sh", children: "npx create-next-app@latest\n" }) }), "\n", _jsxs(_components.p, { children: ["Für weitere Details zur Installation, siehe den ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "offiziellen Leitfaden" }), "."] }), "\n", _jsxs(_components.h3, { id: "erstellung-einer-sitzungsbibliothek", children: ["Erstellung einer Sitzungsbibliothek", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erstellung-einer-sitzungsbibliothek", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Um das Verständnis der Server Actions zu erleichtern, erstellen wir zuerst eine vereinfachte Version der Sitzung. In dieser Version verwenden wir JSON, um Sitzungsdaten in Cookies zu speichern." }), "\n", _jsxs(_components.p, { children: ["Erstelle eine Datei namens ", _jsx(_components.code, { children: "session/index.ts" }), " und füge den folgenden Code ein:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "'use server';\n\nimport { cookies } from 'next/headers';\n\nexport type Session = {\n username: string;\n};\n\nexport const getSession = async (): Promise => {\n const cookieStore = cookies();\n const session = cookieStore.get('session');\n\n if (session?.value) {\n return JSON.parse(session.value) as Session;\n }\n\n return null;\n};\n\nexport const setSession = async (session: Session) => {\n const cookieStore = cookies();\n cookieStore.set('session', JSON.stringify(session));\n};\n\nexport const removeSession = async () => {\n const cookieStore = cookies();\n cookieStore.delete('session');\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Die erste Zeile ", _jsx(_components.code, { children: "\"use server\"" }), " kennzeichnet die Funktionen dieser Datei als Server Actions."] }), "\n", _jsxs(_components.p, { children: ["Da wir keinen direkten Zugriff auf ", _jsx(_components.code, { children: "request" }), " und ", _jsx(_components.code, { children: "response" }), " haben, verwenden wir ", _jsx(_components.code, { children: "next/headers" }), ", um Cookies zu lesen und zu schreiben. Dies ist nur in Server Actions verfügbar."] }), "\n", _jsxs(_components.h3, { id: "eingehend-zwei-weitere-server-actions", children: ["Eingehend: zwei weitere Server Actions", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#eingehend-zwei-weitere-server-actions", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Mit der Sitzungsbibliothek in der Hand ist es an der Zeit, eine Anmelde- und Abmeldefunktion zu implementieren, um die Nutzbarkeit der Sitzung zu demonstrieren." }), "\n", _jsxs(_components.p, { children: ["Integriere den folgenden Code in ", _jsx(_components.code, { children: "user/index.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "'use server';\n\nimport { removeSession, setSession } from '@/session';\n\nexport const signIn = async (username: string) => {\n await setSession({ username });\n};\n\nexport const signOut = async () => {\n await removeSession();\n};\n" }) }), "\n", _jsx(_components.p, { children: "Hier verwenden wir einen 'vorgetäuschten' Anmeldeprozess, der lediglich einen Benutzernamen erfordert." }), "\n", _jsxs(_components.h2, { id: "erstellung-der-seite", children: ["Erstellung der Seite", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erstellung-der-seite", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Im App Router ist die Seite in der Regel eine asynchrone Komponente, und Server Actions können nicht direkt von einer solchen Komponente aus aufgerufen werden. Wir müssen Komponenten mit ", _jsx(_components.code, { children: "\"use client\"" }), " erstellen:"] }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "components/sign-in.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { signIn } from '@/user';\nimport { useState } from 'react';\n\nconst SignIn = () => {\n const [username, setUsername] = useState('');\n\n return (\n

\n {\n setUsername(event.target.value);\n }}\n />\n {\n signIn(username);\n }}\n >\n Anmelden\n \n

\n );\n};\n\nexport default SignIn;\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "components/sign-out.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { signOut } from '@/user';\n\nconst SignOut = () => {\n return (\n {\n signOut();\n }}\n >\n Abmelden\n \n );\n};\n\nexport default SignOut;\n" }) }), "\n", _jsxs(_components.p, { children: ["Konstruiere schließlich unsere ", _jsx(_components.code, { children: "app/page.tsx" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { getSession } from '@/session';\nimport styles from './page.module.css';\nimport SignIn from '../components/sign-in';\nimport SignOut from '@/components/sign-out';\n\nexport default async function Home() {\n const session = await getSession();\n\n return (\n

\n {session ? (\n

Du bist angemeldet als {session.username}

\n \n

\n ) : (\n \n )}\n

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "implementierung-der-verschlüsselung", children: ["Implementierung der Verschlüsselung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementierung-der-verschlüsselung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Die Aufgabe der Server Actions ist erledigt. Jetzt geht es im letzten Teil der Verschlüsselungsimplementierung, die durch ", _jsx(_components.code, { children: "crypto" }), " umgesetzt werden kann."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// session/encrypt.ts\nimport { createCipheriv, createDecipheriv } from 'crypto';\n\n// Ersetze durch deinen eigenen Schlüssel und iv\n// Du kannst diese mit crypto.randomBytes(32) und crypto.randomBytes(16) erstellen\nconst key = Buffer.from('17204a84b538359abe8ba74807efa12a068c20a7c7f224b35198acf832cea57b', 'hex');\nconst iv = Buffer.from('da1cdcd9fe4199c835bd5f1d56446aff', 'hex');\nconst algorithm = 'aes-256-cbc';\n\nexport const encrypt = (text: string) => {\n const cipher = createCipheriv(algorithm, key, iv);\n const encrypted = cipher.update(text, 'utf8', 'base64');\n return `${encrypted}${cipher.final('base64')}`;\n};\n\nexport const decrypt = (encrypted: string) => {\n const decipher = createDecipheriv(algorithm, key, iv);\n const decrypted = decipher.update(encrypted, 'base64', 'utf8');\n return `${decrypted}${decipher.final('utf8')}`;\n};\n" }) }), "\n", _jsx(_components.p, { children: "Als nächstes passe die Sitzungsbibliothek an, um Folgendes zu implementieren:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "'use server';\n\nimport { cookies } from 'next/headers';\nimport { decrypt, encrypt } from './encrypt';\n\nexport type Session = {\n username: string;\n};\n\nexport const getSession = async (): Promise => {\n const cookieStore = cookies();\n const session = cookieStore.get('session');\n\n if (session?.value) {\n try {\n const decrypted = decrypt(session.value);\n return JSON.parse(decrypted) as Session;\n } catch {\n // Ungültige Sitzung ignorieren\n }\n }\n\n return null;\n};\n\nexport const setSession = async (session: Session) => {\n const cookieStore = cookies();\n const encrypted = encrypt(JSON.stringify(session));\n cookieStore.set('session', encrypted);\n};\n\nexport const removeSession = async () => {\n const cookieStore = cookies();\n cookieStore.delete('session');\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "fazit", children: ["Fazit", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fazit", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Herzlichen Glückwunsch! Du hast erfolgreich eine zustandslose Sitzung für Next.js implementiert. Hier ist eine Online-", _jsx(_components.a, { href: "https://nextjs-stateless-session.vercel.app/", children: "Vorschau" }), " auf Vercel, und du kannst den vollständigen Quellcode ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "hier" }), " herunterladen. Wir hoffen, dass dieser Leitfaden dein Verständnis der brandneuen Server Actions unterstützt."] }), "\n", _jsx(_components.p, { children: "Als nächstes werden wir erforschen, wie man Server Actions zur Integration von Logto in Next.js verwendet. Bleib dran!" }), "\n", _jsx(LogtoCloudButton, { children: "Interessiert an Logto? Probiere Logto noch heute aus." })] }); } 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."); }