"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduktion", "hProperties": { "id": "introduktion" } }, "depth": 2, "value": "Introduktion" }, { "data": { "id": "att-avvika-från-rest-apier", "hProperties": { "id": "att-avvika-från-rest-apier" } }, "depth": 2, "value": "Att avvika från REST API:er" }, { "data": { "id": "behovet-av-statuslös-session", "hProperties": { "id": "behovet-av-statuslös-session" } }, "depth": 2, "value": "Behovet av statuslös session" }, { "data": { "id": "grundläggande-sessionsimplementering", "hProperties": { "id": "grundläggande-sessionsimplementering" } }, "depth": 2, "value": "Grundläggande sessionsimplementering" }, { "data": { "id": "skapa-ett-sessionsbibliotek", "hProperties": { "id": "skapa-ett-sessionsbibliotek" } }, "depth": 3, "value": "Skapa ett sessionsbibliotek" }, { "data": { "id": "inkommande-två-fler-server-actions", "hProperties": { "id": "inkommande-två-fler-server-actions" } }, "depth": 3, "value": "Inkommande: två fler Server Actions" }, { "data": { "id": "bygga-sidan", "hProperties": { "id": "bygga-sidan" } }, "depth": 2, "value": "Bygga sidan" }, { "data": { "id": "implementera-kryptering", "hProperties": { "id": "implementera-kryptering" } }, "depth": 2, "value": "Implementera kryptering" }, { "data": { "id": "slutsats", "hProperties": { "id": "slutsats" } }, "depth": 2, "value": "Slutsats" }]; const readingTime = { "minutes": 3, "words": 994, "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: "introduktion", children: ["Introduktion", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduktion", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Efter den mycket hyllade lanseringen av ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), ", introducerade Next.js ytterligare en funktion, ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions", children: "Server Actions" }), ". Denna nya innovation underlättar datamanipulation på serversidan, minskar beroendet av JavaScript på klientsidan och förbättrar formulär progressivt – allt medan man använder JavaScript och React för att skapa robusta webbapplikationer utan behov av traditionella REST API:er."] }), "\n", _jsx(_components.p, { children: "I denna artikel utnyttjar vi de många fördelarna som erbjuds av denna innovation och ser det i praktiken när vi implementerar en cookie-baserad statuslös session för Next.js. Denna artikel fungerar som en steg-för-steg-guide som leder dig genom varje fas av att skapa ett demoprojekt med App Router." }), "\n", _jsxs(_components.p, { children: ["Vår praktiska demonstration kan enkelt distribueras till Vercel med ", _jsx(_components.a, { href: "https://vercel.com/docs/functions/edge-functions/edge-runtime", children: "Edge Runtime" }), ". Och du kan ladda ner hela källkoden från ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "GitHub" }), "."] }), "\n", _jsxs(_components.h2, { id: "att-avvika-från-rest-apier", children: ["Att avvika från REST API:er", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#att-avvika-från-rest-apier", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Traditionellt, om vi vill skapa en Next.js web app som frågar efter databasen i backend, kan vi skapa några REST API:er för att validera auth-tillståndet och fråga efter databasen, sedan kommer front-end React appen att anropa dessa API:er. Men om det inte finns något behov av att öppna API:t för allmänheten och denna react-app är den enda klienten, verkar det överflödigt att använda REST API:er eftersom de endast kommer att anropas av oss själva." }), "\n", _jsxs(_components.p, { children: ["Med Server Actions kan React-komponenten nu köra serverside-kod. Istället för att manuellt behöva skapa en API-endpunkt, skapar Server Actions automatiskt en endpunkt för Next.js att använda bakom kulisserna. När du anropar en Server Action skickar Next.js en ", _jsx(_components.code, { children: "POST" }), "-förfrågan till sidan du är på med metadata om vilken åtgärd som ska köras."] }), "\n", _jsxs(_components.h2, { id: "behovet-av-statuslös-session", children: ["Behovet av statuslös session", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#behovet-av-statuslös-session", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Som ett föredraget ramverk för att skapa statuslösa applikationer, innebär Next.js ofta serverless, vilket innebär att vi inte kan använda minnet för att lagra sessionsdata. Traditionella sessioner kräver användning av en extern lagringstjänst, som Redis eller en databas." }), "\n", _jsx(_components.p, { children: "Men när sessionsdata förblir tillräckligt små har vi en alternativ väg: utforma en statuslös session med säkra krypteringsmetoder och cookies lagrade på klientsidan. Denna metod kringgår behovet av extern lagring och håller sessionsdata decentraliserad, vilket erbjuder betydande fördelar när det gäller serverbelastning och den övergripande applikationens prestanda." }), "\n", _jsx(_components.p, { children: "Så vårt mål är en lätt och effektiv statuslös session som utnyttjar klientsidans lagringskapacitet och samtidigt säkerställer säkerheten genom välutförd kryptering." }), "\n", _jsxs(_components.h2, { id: "grundläggande-sessionsimplementering", children: ["Grundläggande sessionsimplementering", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#grundläggande-sessionsimplementering", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Först och främst, vi behöver initiera ett nytt projekt:" }), "\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 mer information om installationen, se den ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "officiella guiden" }), "."] }), "\n", _jsxs(_components.h3, { id: "skapa-ett-sessionsbibliotek", children: ["Skapa ett sessionsbibliotek", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#skapa-ett-sessionsbibliotek", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "För att göra det enklare att förstå Server Actions, kommer vi att skapa en förenklad version av sessionen först. I denna version kommer vi att använda JSON för att lagra sessionsdata i cookies." }), "\n", _jsxs(_components.p, { children: ["Skapa en fil som heter ", _jsx(_components.code, { children: "session/index.ts" }), " och inkludera följande kod:"] }), "\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: ["Den första raden ", _jsx(_components.code, { children: "\"use server\"" }), " markerar denna fils funktioner som Server Actions."] }), "\n", _jsxs(_components.p, { children: ["Eftersom vi inte kan komma åt ", _jsx(_components.code, { children: "request" }), " och ", _jsx(_components.code, { children: "response" }), " direkt, använder vi ", _jsx(_components.code, { children: "next/headers" }), " för att läsa och skriva cookies. Detta är endast tillgängligt i Server Actions."] }), "\n", _jsxs(_components.h3, { id: "inkommande-två-fler-server-actions", children: ["Inkommande: två fler Server Actions", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inkommande-två-fler-server-actions", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Med sessionsbiblioteket på plats är det dags att implementera en logga in- och logga ut-funktion för att visa sessionens användbarhet." }), "\n", _jsxs(_components.p, { children: ["Inkorporera följande kod i ", _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: "Här använder vi en 'låtsas'-inloggningsprocess som bara kräver ett användarnamn." }), "\n", _jsxs(_components.h2, { id: "bygga-sidan", children: ["Bygga sidan", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bygga-sidan", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["I App Router är sidan vanligtvis en asynkron komponent, och Server Actions kan inte anropas direkt från en sådan komponent. Vi behöver skapa komponenter med ", _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 Logga in\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 Logga ut\n \n );\n};\n\nexport default SignOut;\n" }) }), "\n", _jsxs(_components.p, { children: ["Slutligen, låt oss bygga vår ", _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 har loggat in som {session.username}

\n \n

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

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "implementera-kryptering", children: ["Implementera kryptering", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementera-kryptering", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Arbetet med Server Actions är klart. Nu återstår den sista delen som involverar krypteringsimplementeringen, vilket kan uppnås genom ", _jsx(_components.code, { children: "crypto" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// session/encrypt.ts\nimport { createCipheriv, createDecipheriv } from 'crypto';\n\n// Byt ut med din egen nyckel och iv\n// Du kan generera dem med crypto.randomBytes(32) och 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: "Nästa, modifiera sessionsbiblioteket för att implementera följande:" }), "\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 // Ignorera ogiltig session\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: "slutsats", children: ["Slutsats", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#slutsats", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Grattis! Du har framgångsrikt implementerat en statuslös session för Next.js. Här är en online ", _jsx(_components.a, { href: "https://nextjs-stateless-session.vercel.app/", children: "förhandsgranskning" }), " på Vercel, och du kan ladda ner hela källkoden ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "här" }), ". Vi hoppas att denna guide hjälper dig att förstå de helt nya Server Actions."] }), "\n", _jsx(_components.p, { children: "Nästa gång utforskar vi hur man använder Server Actions för att integrera Logto för Next.js. Häng med!" }), "\n", _jsx(LogtoCloudButton, { children: "Intresserad av Logto? Prova Logto idag." })] }); } 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."); }