"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-apis", "hProperties": { "id": "หลีกเลี่ยง-rest-apis" } }, "depth": 2, "value": "หลีกเลี่ยง REST APIs" }, { "data": { "id": "ความจำเป็นสำหรับเซสชันแบบไม่มีสถานะ", "hProperties": { "id": "ความจำเป็นสำหรับเซสชันแบบไม่มีสถานะ" } }, "depth": 2, "value": "ความจำเป็นสำหรับเซสชันแบบไม่มีสถานะ" }, { "data": { "id": "การดำเนินงานเซสชันพื้นฐาน", "hProperties": { "id": "การดำเนินงานเซสชันพื้นฐาน" } }, "depth": 2, "value": "การดำเนินงานเซสชันพื้นฐาน" }, { "data": { "id": "การสร้างไลบรารีเซสชัน", "hProperties": { "id": "การสร้างไลบรารีเซสชัน" } }, "depth": 3, "value": "การสร้างไลบรารีเซสชัน" }, { "data": { "id": "กำลังมา-server-actions-สองงานเพิ่ม", "hProperties": { "id": "กำลังมา-server-actions-สองงานเพิ่ม" } }, "depth": 3, "value": "กำลังมา: 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": 1, "words": 431, "text": "less than a minute 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 ฝั่งลูกค้า และค่อยๆ เพิ่มความสามารถให้กับฟอร์ม ทั้งหมดนี้ใช้ JavaScript และ React ในการสร้างเว็บแอปพลิเคชันที่แข็งแกร่งโดยไม่ต้องการ REST APIs แบบดั้งเดิม"] }), "\n", _jsx(_components.p, { children: "ในบทความนี้ เราจะนำข้อดีที่มากมายของนวัตกรรมนี้มาใช้และดูมันในการปฏิบัติงานขณะที่เราสร้างเซสชันแบบไม่มีสถานะโดยใช้คุกกี้สำหรับ Next.js บทความนี้จะทำหน้าที่เป็นคู่มือที่จะแนะนำคุณผ่านทุกขั้นตอนของการสร้างโปรเจคตัวอย่างโดยใช้ App Router" }), "\n", _jsxs(_components.p, { children: ["การสาธิตที่ปฏิบัติของเราสามารถถูกปรับใช้ไปยัง Vercel ได้อย่างง่ายดายโดยใช้ ", _jsx(_components.a, { href: "https://vercel.com/docs/functions/edge-functions/edge-runtime", children: "Edge Runtime" }), " และคุณสามารถดาวน์โหลดซอร์สโค้ดเต็มได้จาก ", _jsx(_components.a, { href: "https://github.com/wangsijie/nextjs-stateless-session", children: "GitHub" })] }), "\n", _jsxs(_components.h2, { id: "หลีกเลี่ยง-rest-apis", children: ["หลีกเลี่ยง REST APIs", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#หลีกเลี่ยง-rest-apis", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "โดยดั้งเดิมแล้ว ถ้าเราต้องการสร้าง Next.js เว็บแอปที่เรียกฐานข้อมูลในแบ็กเอนด์ เราอาจสร้าง REST APIs บางอย่างเพื่อยืนยันสถานะการยืนยันสิทธิ์และเรียกฐานข้อมูล จากนั้น React แอปฝั่งหน้าแรกจะเรียก APIs เหล่านี้ แต่ถ้าไม่จำเป็นต้องเปิด API ให้สาธารณะและแอป react นี้เป็นลูกค้าเพียงตัวเดียว ดูเหมือนว่าการใช้ REST APIs จะซ้ำซ้อนเพราะมันจะถูกเรียกโดยตัวเราเองเท่านั้น" }), "\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: "กำลังมา-server-actions-สองงานเพิ่ม", children: ["กำลังมา: Server Actions สองงานเพิ่ม", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#กำลังมา-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 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: ["สุดท้าย มาสร้าง ", _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 // 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: "สรุป", children: ["สรุป", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#สรุป", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["ขอแสดงความยินดี! คุณได้ดำเนินการเซสชันแบบไม่มีสถานะสำหรับ Next.js อย่างสำเร็จ นี่คือ ", _jsx(_components.a, { href: "https://nextjs-stateless-session.vercel.app/", children: "ตัวอย่างออนไลน์" }), " บน Vercel และคุณสามารถดาวน์โหลดซอร์สโค้ดทั้งหมด ", _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."); }