
Middleware และ Auth ใน Next.js
Middleware, NextAuth.js, JWT, การจัดการ session, เส้นทางที่ได้รับการป้องกัน, RBAC
1Middleware ใน Next.js คืออะไร?
Middleware ใน Next.js คืออะไร?
คำตอบ
Middleware ใน Next.js คือโค้ดที่ทำงานก่อนที่คำร้องจะถูกประมวลผล ช่วยให้คุณสามารถแก้ไขการตอบกลับ เปลี่ยนเส้นทาง เพิ่ม headers หรือบล็อกการเข้าถึงได้ โดยทำงานบน Edge Runtime เพื่อประสิทธิภาพสูงสุด มักใช้สำหรับการยืนยันตัวตน การระบุตำแหน่งทางภูมิศาสตร์ หรือ logging
2ควรวางไฟล์ middleware ไว้ที่ไหนในโปรเจกต์ Next.js ที่ใช้ App Router?
ควรวางไฟล์ middleware ไว้ที่ไหนในโปรเจกต์ Next.js ที่ใช้ App Router?
คำตอบ
ไฟล์ middleware.ts (หรือ .js) ต้องวางไว้ที่ root ของโปรเจกต์ ในระดับเดียวกับโฟลเดอร์ app โดย Next.js จะตรวจจับไฟล์นี้โดยอัตโนมัติและรันสำหรับทุกเส้นทาง หรืออาจวางไว้ในโฟลเดอร์ src ได้หากโปรเจกต์ใช้โครงสร้างนี้
3จะกำหนดเส้นทางที่ middleware ทำงานได้อย่างไร?
จะกำหนดเส้นทางที่ middleware ทำงานได้อย่างไร?
คำตอบ
การใช้การกำหนดค่า matcher ใน middleware ช่วยให้ระบุเส้นทางที่เกี่ยวข้องผ่านรูปแบบ path ได้ โดยค่าเริ่มต้น middleware จะทำงานบนทุกเส้นทางยกเว้นไฟล์ static โดย matcher รองรับ wildcards และ regex สำหรับการควบคุมเส้นทางเป้าหมายอย่างแม่นยำ
ข้อได้เปรียบหลักของการใช้ NextAuth.js สำหรับการยืนยันตัวตนคืออะไร?
จะป้องกันเส้นทางด้วย middleware ของ Next.js ได้อย่างไร?
+19 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React / Next.js อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
React Hooks
วงจรชีวิตของ component
React Router
การจัดการ state ด้วย Context
ฟอร์มและ Controlled Components
การดึงข้อมูลและ API
React Query (TanStack Query)
Styling & CSS-in-JS
พื้นฐาน Next.js
TypeScript กับ React
การดึงข้อมูล Next.js
Server Actions ของ Next.js
การกำหนดเส้นทางและการนำทางใน Next.js
API Routes ใน Next.js
Metadata & SEO ใน Next.js
การทดสอบ React
Zustand State Management
การเพิ่มประสิทธิภาพ React
Error Boundaries & การจัดการข้อผิดพลาด
Advanced React Patterns
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
Architecture & Design Patterns
React Server Components
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี