"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introductie", "hProperties": { "id": "introductie" } }, "depth": 2, "value": "Introductie" }, { "data": { "id": "afstappen-van-rest-apis", "hProperties": { "id": "afstappen-van-rest-apis" } }, "depth": 2, "value": "Afstappen van REST API's" }, { "data": { "id": "de-behoefte-aan-stateless-sessie", "hProperties": { "id": "de-behoefte-aan-stateless-sessie" } }, "depth": 2, "value": "De behoefte aan stateless sessie" }, { "data": { "id": "basisimplementatie-van-sessie", "hProperties": { "id": "basisimplementatie-van-sessie" } }, "depth": 2, "value": "Basisimplementatie van sessie" }, { "data": { "id": "een-sessiebibliotheek-maken", "hProperties": { "id": "een-sessiebibliotheek-maken" } }, "depth": 3, "value": "Een sessiebibliotheek maken" }, { "data": { "id": "in-aantocht-nog-twee-server-actions", "hProperties": { "id": "in-aantocht-nog-twee-server-actions" } }, "depth": 3, "value": "In aantocht: nog twee Server Actions" }, { "data": { "id": "het-bouwen-van-de-pagina", "hProperties": { "id": "het-bouwen-van-de-pagina" } }, "depth": 2, "value": "Het bouwen van de pagina" }, { "data": { "id": "versleuteling-implementeren", "hProperties": { "id": "versleuteling-implementeren" } }, "depth": 2, "value": "Versleuteling implementeren" }, { "data": { "id": "conclusie", "hProperties": { "id": "conclusie" } }, "depth": 2, "value": "Conclusie" }]; const readingTime = { "minutes": 3, "words": 1046, "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: "introductie", children: ["Introductie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introductie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Na de veelgeprezen release van de ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), ", introduceerde Next.js een andere functie, ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions", children: "Server Actions" }), ". Deze nieuwe innovatie faciliteert server-side datamanipulaties, vermindert de afhankelijkheid van client-side JavaScript en verbetert formulieren progressief - allemaal terwijl JavaScript en React worden gebruikt om robuuste webapplicaties te maken zonder de noodzaak van traditionele REST API's."] }), "\n", _jsx(_components.p, { children: "In dit artikel maken we gebruik van de overvloed aan voordelen die deze innovatie biedt en zien we het in actie wanneer we een cookie-gebaseerde stateless sessie voor Next.js implementeren. Dit stuk dient als een stapsgewijze handleiding die je door elke fase van het maken van een demoproject met behulp van de App Router loodst." }), "\n", _jsxs(_components.p, { children: ["Onze praktische demonstratie kan gemakkelijk worden geïmplementeerd naar Vercel met behulp van ", _jsx(_components.a, { href: "https://vercel.com/docs/functions/edge-functions/edge-runtime", children: "Edge Runtime" }), ". En je kunt de volledige broncode downloaden van ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "GitHub" }), "."] }), "\n", _jsxs(_components.h2, { id: "afstappen-van-rest-apis", children: ["Afstappen van REST API's", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#afstappen-van-rest-apis", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Traditioneel, als we een Next.js-webapp willen maken die een database in de backend opvraagt, kunnen we enkele REST API's maken om de authenticatietoestand te valideren en de database op te vragen, waarna de front-end React-app deze API's zal aanroepen. Maar als het niet nodig is om een API te openen voor het publiek en deze react-app de enige client is, lijkt het overbodig om REST API's te gebruiken, omdat ze alleen door onszelf worden aangeroepen." }), "\n", _jsxs(_components.p, { children: ["Met Server Actions kan de React-component nu server-side code uitvoeren. In plaats van handmatig een API-eindpunt te moeten maken, maakt Server Actions automatisch een eindpunt voor Next.js om achter de schermen te gebruiken. Bij het aanroepen van een Server Action stuurt Next.js een ", _jsx(_components.code, { children: "POST" }), "-verzoek naar de pagina waarop je je bevindt, met metadata voor welke actie moet worden uitgevoerd."] }), "\n", _jsxs(_components.h2, { id: "de-behoefte-aan-stateless-sessie", children: ["De behoefte aan stateless sessie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#de-behoefte-aan-stateless-sessie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Als een voorkeursframework voor het creëren van stateless applicaties betekent Next.js vaak serverless, waarbij we het geheugen niet kunnen gebruiken om sessiegegevens op te slaan. Traditionele sessies vereisen het gebruik van een externe opslagdienst, zoals Redis of een database." }), "\n", _jsx(_components.p, { children: "Echter, wanneer de sessiegegevens klein genoeg blijven, hebben we een alternatief: het ontwikkelen van een stateless sessie met behulp van veilige versleutelingsmethoden en cookies die aan de client-zijde worden opgeslagen. Deze methode omzeilt de noodzaak van externe opslag en houdt de sessiegegevens gedecentraliseerd, wat niet-triviale voordelen biedt met betrekking tot serverbelasting en de algehele applicatieprestaties." }), "\n", _jsx(_components.p, { children: "Ons doel is dus een lichte, efficiënte stateless sessie die gebruikmaakt van de opslagcapaciteit aan de client-zijde en tegelijkertijd veiligheid garandeert door goed uitgevoerde versleuteling." }), "\n", _jsxs(_components.h2, { id: "basisimplementatie-van-sessie", children: ["Basisimplementatie van sessie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#basisimplementatie-van-sessie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Allereerst moeten we een nieuw project initiëren:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-sh", children: "npx create-next-app@latest\n" }) }), "\n", _jsxs(_components.p, { children: ["Voor meer details over de installatie, raadpleeg de ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "officiele handleiding" }), "."] }), "\n", _jsxs(_components.h3, { id: "een-sessiebibliotheek-maken", children: ["Een sessiebibliotheek maken", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#een-sessiebibliotheek-maken", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Om Server Actions beter te begrijpen, maken we eerst een vereenvoudigde versie van de sessie. In deze versie zullen we JSON gebruiken om sessiegegevens in cookies op te slaan." }), "\n", _jsxs(_components.p, { children: ["Maak een bestand genaamd ", _jsx(_components.code, { children: "session/index.ts" }), " en voeg de volgende code toe:"] }), "\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: ["De eerste regel ", _jsx(_components.code, { children: "\"use server\"" }), " markeert de functies van dit bestand als Server Actions."] }), "\n", _jsxs(_components.p, { children: ["Omdat we geen toegang kunnen krijgen tot ", _jsx(_components.code, { children: "request" }), " en ", _jsx(_components.code, { children: "response" }), " direct, gebruiken we ", _jsx(_components.code, { children: "next/headers" }), " om cookies te lezen en te schrijven. Dit is alleen beschikbaar in Server Actions."] }), "\n", _jsxs(_components.h3, { id: "in-aantocht-nog-twee-server-actions", children: ["In aantocht: nog twee Server Actions", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#in-aantocht-nog-twee-server-actions", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Met de sessiebibliotheek in werking, is het tijd om een inlog- en uitlogfunctie te implementeren om de bruikbaarheid van de sessie te demonstreren." }), "\n", _jsxs(_components.p, { children: ["Voeg de volgende code toe aan ", _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 gebruiken we een 'nep' inlogproces dat slechts een gebruikersnaam vereist." }), "\n", _jsxs(_components.h2, { id: "het-bouwen-van-de-pagina", children: ["Het bouwen van de pagina", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#het-bouwen-van-de-pagina", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["In App Router is de pagina meestal een asynchrone component en kunnen Server Actions niet direct vanuit zo'n component worden aangeroepen. We moeten componenten maken met ", _jsx(_components.code, { children: "\"use client\"" }), ":"] }), "\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 Inloggen\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 Uitloggen\n \n );\n};\n\nexport default SignOut;\n" }) }), "\n", _jsxs(_components.p, { children: ["Laten we ten slotte onze ", _jsx(_components.code, { children: "app/page.tsx" }), " construeren"] }), "\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

Je bent ingelogd als {session.username}

\n \n

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

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "versleuteling-implementeren", children: ["Versleuteling implementeren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#versleuteling-implementeren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["De taak van Server Actions is voltooid. Nu betreft het laatste deel de implementatie van de versleuteling die met ", _jsx(_components.code, { children: "crypto" }), " kan worden gerealiseerd."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// session/encrypt.ts\nimport { createCipheriv, createDecipheriv } from 'crypto';\n\n// Vervang met je eigen sleutel en iv\n// Je kunt ze genereren met crypto.randomBytes(32) en crypto.randomBytes(16)\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: "Pas vervolgens de sessiebibliotheek aan om het volgende te implementeren:" }), "\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 // Negeer ongeldige sessie\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: "conclusie", children: ["Conclusie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Gefeliciteerd! Je hebt succesvol een stateless sessie voor Next.js geïmplementeerd. Hier is een online ", _jsx(_components.a, { href: "https://nextjs-stateless-session.vercel.app/", children: "voorbeeld" }), " op Vercel, en je kunt de volledige broncode ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "hier" }), " downloaden. We hopen dat deze handleiding je begrip van de gloednieuwe Server Actions bevordert."] }), "\n", _jsx(_components.p, { children: "Vervolgens gaan we onderzoeken hoe je Server Actions kunt gebruiken om Logto voor Next.js te integreren. Blijf op de hoogte!" }), "\n", _jsx(LogtoCloudButton, { children: "Geïnteresseerd in Logto? Probeer Logto vandaag." })] }); } 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."); }