"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduction", "hProperties": { "id": "introduction" } }, "depth": 2, "value": "Introduction" }, { "data": { "id": "steering-away-from-rest-apis", "hProperties": { "id": "steering-away-from-rest-apis" } }, "depth": 2, "value": "Steering away from REST APIs" }, { "data": { "id": "the-need-for-stateless-session", "hProperties": { "id": "the-need-for-stateless-session" } }, "depth": 2, "value": "The need for stateless session" }, { "data": { "id": "basic-session-implementation", "hProperties": { "id": "basic-session-implementation" } }, "depth": 2, "value": "Basic session implementation" }, { "data": { "id": "crafting-a-session-library", "hProperties": { "id": "crafting-a-session-library" } }, "depth": 3, "value": "Crafting a session library" }, { "data": { "id": "incoming-two-more-server-actions", "hProperties": { "id": "incoming-two-more-server-actions" } }, "depth": 3, "value": "Incoming: two more Server Actions" }, { "data": { "id": "building-the-page", "hProperties": { "id": "building-the-page" } }, "depth": 2, "value": "Building the page" }, { "data": { "id": "implementing-encryption", "hProperties": { "id": "implementing-encryption" } }, "depth": 2, "value": "Implementing encryption" }, { "data": { "id": "conclusion", "hProperties": { "id": "conclusion" } }, "depth": 2, "value": "Conclusion" }]; const readingTime = { "minutes": 3, "words": 1017, "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: "introduction", children: ["Introduction", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduction", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Following the much-celebrated release of the ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " released, Next.js introduced another feature, ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions", children: "Server Actions" }), ". This new innovation facilitates server-side data manipulations, reduces reliance on client-side JavaScript, and progressively enhances forms–all while using JavaScript and React to create robust web applications without the need for traditional REST APIs."] }), "\n", _jsx(_components.p, { children: "In this article, we tap into the wealth of advantages offered by this innovation and see it in action as we implement a cookie-based stateless session for Next.js. This piece serves as a step-by-step guide that will walk you through every phase of crafting a demo project using the App Router." }), "\n", _jsxs(_components.p, { children: ["Our practical demonstration can be readily deployed to Vercel using ", _jsx(_components.a, { href: "https://vercel.com/docs/functions/edge-functions/edge-runtime", children: "Edge Runtime" }), ". And you can download the full source code from ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "GitHub" }), "."] }), "\n", _jsxs(_components.h2, { id: "steering-away-from-rest-apis", children: ["Steering away from REST APIs", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#steering-away-from-rest-apis", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Traditionally, if we want to create a Next.js web app that queries database in the backend, we may create some REST APIs to validate auth state and query database, then the front-end React app will call these APIs. But if there is no need to open API to the public and this react app is the only client, it seems redundant to use REST APIs for they will only be called by ourselves." }), "\n", _jsxs(_components.p, { children: ["With Server Actions, the React component can now run server side code. Rather than needing to manually create an API endpoint, Server Actions automatically create an endpoint for Next.js to use behind the scenes. When calling a Server Action, Next.js sends a ", _jsx(_components.code, { children: "POST" }), " request to the page you're on with metadata for which action to run."] }), "\n", _jsxs(_components.h2, { id: "the-need-for-stateless-session", children: ["The need for stateless session", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#the-need-for-stateless-session", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "As a preferred framework for creating stateless applications, Next.js often means serverless, in which we can not use the memory to store session data. Traditional sessions necessitate the use of an external storage service, such as Redis or a database." }), "\n", _jsx(_components.p, { children: "However, when the session data remains small enough, we have an alternative path: engineer a stateless session using secure encryption methods and cookies stored on the client-side. This method bypasses the need for external storage and keeps the session data decentralized, offering non-trivial benefits regarding server load and overall application performance." }), "\n", _jsx(_components.p, { children: "So our target is a lightweight, efficient stateless session that capitalizes on the client-side storage capability while ensuring security through well-executed encryption." }), "\n", _jsxs(_components.h2, { id: "basic-session-implementation", children: ["Basic session implementation", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#basic-session-implementation", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "First up, we need to initiate a new project:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-sh", children: "npx create-next-app@latest\n" }) }), "\n", _jsxs(_components.p, { children: ["For more details on the installation, refer to the ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "official guide" }), "."] }), "\n", _jsxs(_components.h3, { id: "crafting-a-session-library", children: ["Crafting a session library", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#crafting-a-session-library", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "To make understanding Server Actions easier, we'll create a simplified version of the session first. In this version, we'll use JSON to store session data in cookies." }), "\n", _jsxs(_components.p, { children: ["Create a file called ", _jsx(_components.code, { children: "session/index.ts" }), " and include the following code:"] }), "\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: ["The first line ", _jsx(_components.code, { children: "\"use server\"" }), " marks this file’s functions as Server Actions."] }), "\n", _jsxs(_components.p, { children: ["Since we cannot access ", _jsx(_components.code, { children: "request" }), " and ", _jsx(_components.code, { children: "response" }), " directly, we use ", _jsx(_components.code, { children: "next/headers" }), " to read and write cookies. This is only available in Server Actions."] }), "\n", _jsxs(_components.h3, { id: "incoming-two-more-server-actions", children: ["Incoming: two more Server Actions", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#incoming-two-more-server-actions", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "With the session library in place, it's time to implement a sign in and sign out feature to showcase the session's usability." }), "\n", _jsxs(_components.p, { children: ["Incorporate the following code into ", _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: "Here, we are using a 'pretend' sign in process that merely requires a username." }), "\n", _jsxs(_components.h2, { id: "building-the-page", children: ["Building the page", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#building-the-page", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "In App Router, the page is usually an asynchronous component, and Server Actions cannot be directly invoked from such a component. We need to create components using `\"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 Sign 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 Sign Out\n \n );\n};\n\nexport default SignOut;\n" }) }), "\n", _jsxs(_components.p, { children: ["Finally, let's construct our ", _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

You have signed in as {session.username}

\n \n

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

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "implementing-encryption", children: ["Implementing encryption", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementing-encryption", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["The job of Server Actions is done. Now, the final part involves the encryption implementation that can be achieved through ", _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// Replace with your own key and iv\n// You can generate them with crypto.randomBytes(32) and 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: "Next, modify the session library to implement the following:" }), "\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 // Ignore invalid 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: "conclusion", children: ["Conclusion", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusion", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Congratulations! You've successfully implemented a stateless session for Next.js. Here is an online ", _jsx(_components.a, { href: "https://nextjs-stateless-session.vercel.app/", children: "preview" }), " on Vercel, and you can download the full source code ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "here" }), ". We hope this guide aids your understanding of the brand new Server Actions."] }), "\n", _jsx(_components.p, { children: "Next, we'll be exploring how to use Server Actions to integrate Logto for Next.js. Stay tuned!" }), "\n", _jsx(LogtoCloudButton, { children: "Interested in Logto? Try Logto today." })] }); } 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."); }