"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "はじめに", "hProperties": { "id": "はじめに" } }, "depth": 2, "value": "はじめに" }, { "data": { "id": "rest-api-からの脱出", "hProperties": { "id": "rest-api-からの脱出" } }, "depth": 2, "value": "REST API からの脱出" }, { "data": { "id": "ステートレスセッションの必要性", "hProperties": { "id": "ステートレスセッションの必要性" } }, "depth": 2, "value": "ステートレスセッションの必要性" }, { "data": { "id": "基本的なセッションの実装", "hProperties": { "id": "基本的なセッションの実装" } }, "depth": 2, "value": "基本的なセッションの実装" }, { "data": { "id": "セッションライブラリの作成", "hProperties": { "id": "セッションライブラリの作成" } }, "depth": 3, "value": "セッションライブラリの作成" }, { "data": { "id": "さらに2つの-server-actions", "hProperties": { "id": "さらに2つの-server-actions" } }, "depth": 3, "value": "さらに2つの Server Actions" }, { "data": { "id": "ページの構築", "hProperties": { "id": "ページの構築" } }, "depth": 2, "value": "ページの構築" }, { "data": { "id": "暗号化の実装", "hProperties": { "id": "暗号化の実装" } }, "depth": 2, "value": "暗号化の実装" }, { "data": { "id": "結論", "hProperties": { "id": "結論" } }, "depth": 2, "value": "結論" }]; const readingTime = { "minutes": 3, "words": 793, "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: "はじめに", children: ["はじめに", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#はじめに", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["多くの注目を集めた ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " のリリースに続き、Next.js は新たな機能である ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions", children: "Server Actions" }), " を導入しました。この新しいイノベーションは、サーバー側でのデータ操作を容易にし、クライアントサイド JavaScript への依存を軽減し、フォームを徐々に強化することで、従来の REST API を必要としない堅牢な Web アプリケーションを JavaScript と React を使用して作成することを可能にします。"] }), "\n", _jsx(_components.p, { children: "この記事では、このイノベーションが提供する豊富な利点に触れ、その実際の使用例として Next.js にクッキーに基づいたステートレスセッションを実装します。このガイドは、デモプロジェクトを App Router を使用して構築するすべての段階を順を追って説明するステップバイステップのガイドです。" }), "\n", _jsxs(_components.p, { children: ["当実践デモは ", _jsx(_components.a, { href: "https://vercel.com/docs/functions/edge-functions/edge-runtime", children: "Edge Runtime" }), " を使用して Vercel に簡単にデプロイできます。また、", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "GitHub" }), " から完全なソースコードをダウンロードすることができます。"] }), "\n", _jsxs(_components.h2, { id: "rest-api-からの脱出", children: ["REST API からの脱出", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#rest-api-からの脱出", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "従来、バックエンドでデータベースをクエリする Next.js Web アプリを作成したい場合、認証状態を検証しデータベースをクエリするためにいくつかの REST API を作成し、フロントエンドの React アプリがこれらの API を呼び出すことになります。しかし、公開 API を作成する必要がなく、この React アプリが唯一のクライアントである場合、それらが自分自身によってのみ呼び出されるのであれば、REST API を使用するのは冗長に思えます。" }), "\n", _jsxs(_components.p, { children: ["Server Actions を使用すると、React コンポーネントがサーバー側のコードを実行できるようになります。手動で API エンドポイントを作成する必要はなく、Server Actions は Next.js が背後で使用するエンドポイントを自動的に作成します。Server Action を呼び出すと、Next.js はどのアクションを実行するかのメタデータとともに、現在いるページに ", _jsx(_components.code, { children: "POST" }), " リクエストを送信します。"] }), "\n", _jsxs(_components.h2, { id: "ステートレスセッションの必要性", children: ["ステートレスセッションの必要性", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ステートレスセッションの必要性", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "ステートレスアプリケーションを作成するための好ましいフレームワークとして、Next.js はよくサーバーレスを意味し、その中でセッションデータを保存するためのメモリーを使用できません。伝統的なセッションは、Redis やデータベースなどの外部ストレージサービスを使用する必要があります。" }), "\n", _jsx(_components.p, { children: "しかし、セッションデータが十分に小さければ、別の方法を選ぶことができます。安全な暗号化方法とクライアントサイドに保存されたクッキーを使用してステートレスセッションを設計します。この方法では外部ストレージを必要とせず、セッションデータを分散化し、サーバーの負荷と全体的なアプリケーションパフォーマンスに関して非トリビアルな利点を提供します。" }), "\n", _jsx(_components.p, { children: "したがって、目標はクライアントサイドストレージの能力を活用しつつ、適切に実行された暗号化を使ってセキュリティを確保する、軽量で効率的なステートレスセッションの構築です。" }), "\n", _jsxs(_components.h2, { id: "基本的なセッションの実装", children: ["基本的なセッションの実装", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#基本的なセッションの実装", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "まず、新しいプロジェクトを開始する必要があります：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-sh", children: "npx create-next-app@latest\n" }) }), "\n", _jsxs(_components.p, { children: ["インストールの詳細については、", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "公式ガイド" }), " を参照してください。"] }), "\n", _jsxs(_components.h3, { id: "セッションライブラリの作成", children: ["セッションライブラリの作成", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#セッションライブラリの作成", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Server Actions を理解しやすくするために、まず簡略化されたセッションのバージョンを作成します。このバージョンでは、クッキーにセッションデータを保存するために JSON を使用します。" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "session/index.ts" }), " というファイルを作成し、以下のコードを含めます："] }), "\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: ["最初の行 ", _jsx(_components.code, { children: "\"use server\"" }), " はこのファイルの関数を Server Actions としてマークしています。"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "request" }), " と ", _jsx(_components.code, { children: "response" }), " に直接アクセスできないため、", _jsx(_components.code, { children: "next/headers" }), " を使用してクッキーを読み書きします。これは Server Actions でのみ使用可能です。"] }), "\n", _jsxs(_components.h3, { id: "さらに2つの-server-actions", children: ["さらに2つの Server Actions", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#さらに2つの-server-actions", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "セッションライブラリが整ったら、サインインとサインアウト機能を実装して、セッションの使いやすさを示します。" }), "\n", _jsxs(_components.p, { children: ["以下のコードを ", _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: "ここでは、単にユーザー名が必要な「仮の」サインインプロセスを使用しています。" }), "\n", _jsxs(_components.h2, { id: "ページの構築", children: ["ページの構築", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ページの構築", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["App Router では、ページは通常非同期コンポーネントであり、Server Actions はそのようなコンポーネントから直接呼び出すことはできません。", _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 サインイン\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 サインアウト\n \n );\n};\n\nexport default SignOut;\n" }) }), "\n", _jsxs(_components.p, { children: ["最後に ", _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

ユーザー名 {session.username} でサインインしています

\n \n

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

\n );\n}\n" }) }), "\n", _jsxs(_components.h2, { id: "暗号化の実装", children: ["暗号化の実装", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#暗号化の実装", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Server Actions の仕事は完了しました。最後の部分は、", _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// 自分のキーと iv に置き換えてください\n// それらは crypto.randomBytes(32) と 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", _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 // 無効なセッションは無視します\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: "結論", children: ["結論", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#結論", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["おめでとうございます！Next.js のためにステートレスセッションを実装することに成功しました。Vercel でのオンライン ", _jsx(_components.a, { href: "https://nextjs-stateless-session.vercel.app/", children: "プレビュー" }), " はこちらから確認でき、完全なソースコードは", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "こちら" }), " からダウンロードすることができます。このガイドが新しい Server Actions の理解に役立つことを願っています。"] }), "\n", _jsx(_components.p, { children: "次に、Server Actions を使用して Logto を Next.js に統合する方法を探ります。お楽しみに！" }), "\n", _jsx(LogtoCloudButton, { children: "Logto に興味がありますか？今日から Logto を試してみましょう。" })] }); } 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."); }