API Routes ใน Next.js
Route Handlers, คำขอ GET/POST, middleware, CORS, การยืนยันตัวตน, การจัดการข้อผิดพลาด
1Route Handler ใน Next.js 13+ ที่ใช้ App Router คืออะไร?
Route Handler ใน Next.js 13+ ที่ใช้ App Router คืออะไร?
คำตอบ
Route Handler คือฟังก์ชันฝั่งเซิร์ฟเวอร์ในไฟล์ route.ts (หรือ route.js) ที่ช่วยให้สร้าง API endpoint แบบกำหนดเองได้ ต่างจาก API Routes ของ Pages Router (โฟลเดอร์ pages/api) ตรงที่ Route Handlers อยู่ในโฟลเดอร์ app/ และรองรับ Web Standard Request/Response โดยจัดการคำขอ HTTP (GET, POST, PUT, DELETE ฯลฯ) ในฝั่งเซิร์ฟเวอร์
2จะสร้าง Route Handler เพื่อจัดการคำขอ GET ได้อย่างไร?
จะสร้าง Route Handler เพื่อจัดการคำขอ GET ได้อย่างไร?
คำตอบ
ในการจัดการคำขอ GET ให้ export ฟังก์ชัน async ชื่อ GET ในไฟล์ route.ts ฟังก์ชันนี้รับอ็อบเจกต์ Request และส่งคืน Response โดยใช้ NextResponse.json() โดย Next.js จะแมปฟังก์ชัน GET ที่ export ไว้กับคำขอ HTTP GET บน route นั้นโดยอัตโนมัติ เมธอด HTTP อื่นๆ (POST, PUT, DELETE, PATCH) ก็ใช้รูปแบบเดียวกันด้วยชื่อของแต่ละเมธอด
3NextResponse กับ Response มาตรฐานต่างกันอย่างไร?
NextResponse กับ Response มาตรฐานต่างกันอย่างไร?
คำตอบ
NextResponse ขยายคลาส Response มาตรฐานของ Web ด้วยฟีเจอร์เฉพาะของ Next.js โดยมีเมธอดที่สะดวก เช่น NextResponse.json() สำหรับ serialization อัตโนมัติ, NextResponse.redirect() สำหรับการ redirect และทำให้การจัดการ cookie และ header ง่ายขึ้น แม้ว่า Response มาตรฐานจะใช้งานได้ แต่แนะนำให้ใช้ NextResponse เพราะช่วยให้โค้ดง่ายขึ้นและทำงานร่วมกับระบบนิเวศของ Next.js ได้ดีกว่า
จะดึงพารามิเตอร์การค้นหา (query params) ใน Route Handler ได้อย่างไร?
จะจัดการคำขอ POST และดึง JSON body ได้อย่างไร?
+17 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ 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
Metadata & SEO ใน Next.js
Middleware และ Auth ใน 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 และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี