การใช้ฟีเจอร์ใหม่ของ Next.js คือ Server Actions เพื่อสร้างเซสชันแบบไม่มีสถานะที่ใช้คุกกี้ และได้รับประโยชน์จาก Server Actions
หลังจากการเปิดตัวที่ได้รับการเฉลิมฉลองอย่างมากของ App Router ที่ได้ถูกปล่อยออกมา Next.js ได้แนะนำฟีเจอร์ใหม่คือ Server Actions นวัตกรรมใหม่นี้อำนวยความสะดวกในการจัดการข้อมูลฝั่งเซิร์ฟเวอร์ ลดการพึ่งพา JavaScript ฝั่งลูกค้า และค่อยๆ เพิ่มความสามารถให้กับฟอร์ม ทั้งหมดนี้ใช้ JavaScript และ React ในการสร้างเว็บแอปพลิเคชันที่แข็งแกร่งโดยไม่ต้องการ REST APIs แบบดั้งเดิม
ในบทความนี้ เราจะนำข้อดีที่มากมายของนวัตกรรมนี้มาใช้และดูมันในการปฏิบัติงานขณะที่เราสร้างเซสชันแบบไม่มีสถานะโดยใช้คุกกี้สำหรับ Next.js บทความนี้จะทำหน้าที่เป็นคู่มือที่จะแนะนำคุณผ่านทุกขั้นตอนของการสร้างโปรเจคตัวอย่างโดยใช้ App Router
การสาธิตที่ปฏิบัติของเราสามารถถูกปรับใช้ไปยัง Vercel ได้อย่างง่ายดายโดยใช้ Edge Runtime และคุณสามารถดาวน์โหลดซอร์สโค้ดเต็มได้จาก GitHub
โดยดั้งเดิมแล้ว ถ้าเราต้องการสร้าง Next.js เว็บแอปที่เรียกฐานข้อมูลในแบ็กเอนด์ เราอาจสร้าง REST APIs บางอย่างเพื่อยืนยันสถานะการยืนยันสิทธิ์และเรียกฐานข้อมูล จากนั้น React แอปฝั่งหน้าแรกจะเรียก APIs เหล่านี้ แต่ถ้าไม่จำเป็นต้องเปิด API ให้สาธารณะและแอป react นี้เป็นลูกค้าเพียงตัวเดียว ดูเหมือนว่าการใช้ REST APIs จะซ้ำซ้อนเพราะมันจะถูกเรียกโดยตัวเราเองเท่านั้น
ด้วย Server Actions คอมโพเนนต์ React สามารถรันโค้ดฝั่งเซิร์ฟเวอร์ได้แล้ว แทนที่จะต้องสร้างปลายทาง API ด้วยตนเอง Server Actions จะสร้างปลายทางสำหรับ Next.js ให้ใช้งานเบื้องหลังโดยอัตโนมัติ เมื่อเรียก Server Action Next.js จะส่งคำขอ POST ไปยังหน้าที่คุณอยู่พร้อมกับเมทาดาทาสำหรับการดำเนินการ
ในฐานะที่เป็นเฟรมเวิร์คที่โปรดปรานในการสร้างแอปพลิเคชันแบบไม่มีสถานะ Next.js มักจะหมายถึงการที่ไม่มีเซิร์ฟเวอร์ ซึ่งเราไม่สามารถใช้หน่วยความจำในการจัดเก็บข้อมูลเซสชัน เซสชันแบบดั้งเดิมต้องใช้บริการจัดเก็บภายนอก เช่น Redis หรือฐานข้อมูล
แต่อย่างไรก็ตาม เมื่อข้อมูลเซสชันยังคงมีขนาดเล็กพอเพียง เรามีทางเลือกอีกทางหนึ่ง: วิศวกรเซสชันแบบไม่มีสถานะโดยใช้วิธีการเข้ารหัสที่ปลอดภัยและคุกกี้ที่เก็บไว้ฝั่งไคลเอนต์ วิธีการนี้ไม่จำเป็นต้องมีการจัดเก็บภายนอกและเก็บข้อมูลเซสชันแบบกระจายตัว เสนอประโยชน์ที่มีความสำคัญเกี่ยวกับโหลดเซิร์ฟเวอร์และประสิทธิภาพทั่วไปของแอปพลิเคชัน
เป้าหมายของเราคือการสร้างเซสชันน้ำหนักเบาที่มีประสิทธิภาพซึ่งใช้ประโยชน์จากความสามารถในการเก็บข้อมูลฝั่งไคลเอนต์ขณะที่มั่นใจในความปลอดภัยด้วยการเข้ารหัสที่ดำเนินการอย่างดี
ก่อนอื่น เราต้องเริ่มโปรเจ็กต์ใหม่:
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการติดตั้ง ดูที่ คู่มืออย่างเป็นทางการ
เพื่อให้เข้าใจใน Server Actions ได้ง่ายขึ้น เราจะสร้างเวอร์ชันเซสชันที่เรียบง่ายก่อน ในเวอร์ชันนี้ เราจะใช้ JSON ในการจัดเก็บข้อมูลเซสชันในคุกกี้
สร้างไฟล์ที่เรียกว่า session/index.ts และรวมโค้ดต่อไปนี้เข้าไป:
บรรทัดแรก "use server" หมายเหตุฟังก์ชันของไฟล์นี้เป็น Server Actions
เนื่องจากเราไม่สามารถเข้าถึง request และ response ได้โดยตรง เราจึงใช้ next/headers ในการอ่านและเขียนคุกกี้ ซึ่งใช้ได้เฉพาะใน Server Actions
เมื่อมีไลบรารีเซสชันอยู่แล้ว ก็ถึงเวลาสร้างฟีเจอร์เข้าระบบและออกระบบเพื่อแสดงให้เห็นความสามารถของเซสชัน
ผสานโค้ดต่อไปนี้ลงใน user/index.ts:
ที่นี่ เรากำลังใช้กระบวนการเข้าระบบแบบ 'เสมือน' ที่ต้องการเพียงชื่อผู้ใช้
ใน App Router หน้ามักจะเป็นคอมโพเนนต์แบบอะซิงโครนัส และ Server Actions ไม่สามารถถูกเรียกใช้โดยตรงจากคอมโพเนนต์ดังกล่าวได้ เราจำเป็นต้องสร้างคอมโพเนนต์โดยใช้ "use client"
components/sign-in.tsx
components/sign-out.tsx
สุดท้าย มาสร้าง app/page.tsx
งานของ Server Actions เสร็จสมบูรณ์แล้ว ตอนนี้ ขั้นตอนสุดท้ายคือต้องมีการประยุกต์ใช้การเข้ารหัสที่สามารถทำได้ผ่าน crypto
ต่อไป แก้ไขไลบรารีเซสชันเพื่อดำเนินการตามนี้:
ขอแสดงความยินดี! คุณได้ดำเนินการเซสชันแบบไม่มีสถานะสำหรับ Next.js อย่างสำเร็จ นี่คือ ตัวอย่างออนไลน์ บน Vercel และคุณสามารถดาวน์โหลดซอร์สโค้ดทั้งหมด ที่นี่ เราหวังว่าคู่มือนี้จะช่วยเสริมความเข้าใจใน Server Actions ใหม่ล่าสุด
ถัดไป เราจะสำรวจวิธีการใช้ Server Actions เพื่อบูรณาการ Logto สำหรับ Next.js คอยติดตาม!