# API Routes ใน Next.js (React / Next.js)

> Route Handlers, คำขอ GET/POST, middleware, CORS, การยืนยันตัวตน, การจัดการข้อผิดพลาด

- 20 คำถามสัมภาษณ์
- Mid-Level
- [คำถามสัมภาษณ์: React / Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions.md)

## 1. 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 ได้อย่างไร?

**คำตอบ**

ในการจัดการคำขอ GET ให้ export ฟังก์ชัน async ชื่อ GET ในไฟล์ route.ts ฟังก์ชันนี้รับอ็อบเจกต์ Request และส่งคืน Response โดยใช้ NextResponse.json() โดย Next.js จะแมปฟังก์ชัน GET ที่ export ไว้กับคำขอ HTTP GET บน route นั้นโดยอัตโนมัติ เมธอด HTTP อื่นๆ (POST, PUT, DELETE, PATCH) ก็ใช้รูปแบบเดียวกันด้วยชื่อของแต่ละเมธอด

## 3. NextResponse กับ Response มาตรฐานต่างกันอย่างไร?

**คำตอบ**

NextResponse ขยายคลาส Response มาตรฐานของ Web ด้วยฟีเจอร์เฉพาะของ Next.js โดยมีเมธอดที่สะดวก เช่น NextResponse.json() สำหรับ serialization อัตโนมัติ, NextResponse.redirect() สำหรับการ redirect และทำให้การจัดการ cookie และ header ง่ายขึ้น แม้ว่า Response มาตรฐานจะใช้งานได้ แต่แนะนำให้ใช้ NextResponse เพราะช่วยให้โค้ดง่ายขึ้นและทำงานร่วมกับระบบนิเวศของ Next.js ได้ดีกว่า

## มีอีก 17 คำถาม

- จะดึงพารามิเตอร์การค้นหา (query params) ใน Route Handler ได้อย่างไร?
- จะจัดการคำขอ POST และดึง JSON body ได้อย่างไร?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ React / Next.js อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/react-next/interview-questions/javascript-essentials.md): 25 คำถาม, Junior
- [พื้นฐาน React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-fundamentals.md): 20 คำถาม, Junior
- [React Hooks](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-hooks.md): 22 คำถาม, Junior
- [วงจรชีวิตของ component](https://sharpskill.dev/th/technologies/react-next/interview-questions/component-lifecycle.md): 18 คำถาม, Junior
- [React Router](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-router.md): 20 คำถาม, Junior
- [การจัดการ state ด้วย Context](https://sharpskill.dev/th/technologies/react-next/interview-questions/state-management-context.md): 18 คำถาม, Junior
- [ฟอร์มและ Controlled Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/forms-controlled-components.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูลและ API](https://sharpskill.dev/th/technologies/react-next/interview-questions/fetching-data-api.md): 20 คำถาม, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-query-tanstack.md): 20 คำถาม, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/th/technologies/react-next/interview-questions/styling-css-in-js.md): 18 คำถาม, Mid-Level
- [พื้นฐาน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 คำถาม, Mid-Level
- [TypeScript กับ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/typescript-react.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูล Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 คำถาม, Mid-Level
- [Server Actions ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 คำถาม, Mid-Level
- [การกำหนดเส้นทางและการนำทางใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 คำถาม, Mid-Level
- [Metadata & SEO ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 คำถาม, Mid-Level
- [Middleware และ Auth ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 คำถาม, Mid-Level
- [การทดสอบ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-testing.md): 20 คำถาม, Mid-Level
- [Zustand State Management](https://sharpskill.dev/th/technologies/react-next/interview-questions/zustand-state-management.md): 18 คำถาม, Mid-Level
- [การเพิ่มประสิทธิภาพ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-performance-optimization.md): 22 คำถาม, Senior
- [Error Boundaries & การจัดการข้อผิดพลาด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-error-boundaries.md): 18 คำถาม, Senior
- [Advanced React Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 คำถาม, Senior
- [ฟีเจอร์ขั้นสูงของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 คำถาม, Senior
- [การ Deploy & Production ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 คำถาม, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 คำถาม, Senior
- [React Server Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-server-components.md): 26 คำถาม, Senior
- [การแปลภาษา Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 คำถาม, Senior
- [React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-security-best-practices.md): 22 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-api-routes