เส้นทาง API และมิดเดิลแวร์ของ Next.js
สร้างปลายทาง API แบบไร้เซิร์ฟเวอร์ในไดเรกทอรี api/ ประมวลผลคำขอใน Route Handlers และเรียกใช้มิดเดิลแวร์แบบเอดจ์สำหรับการยืนยันตัวตนและการเปลี่ยนเส้นทาง
เส้นทาง API และมิดเดิลแวร์ของ Next.js เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงมีเส้นทาง API
Next.js รวมเซิร์ฟเวอร์ไว้กับแอปของคุณ คุณจึงเขียนจุดปลายทางฝั่งแบ็กเอนด์ไว้ใกล้กับหน้าเว็บได้โดยไม่ต้องมีโครงการ Node แยกต่างหาก เหมาะอย่างยิ่งสำหรับการทำพร็อกซี การส่งแบบฟอร์ม เว็บฮุก และ API ขนาดเล็ก
เส้นทาง API ของตัวจัดการเส้นทางแบบหน้า
ไฟล์ใน pages/api/ จะส่งออกฟังก์ชันเริ่มต้นที่ใช้ req และ res ในรูปแบบเดียวกับ Express
// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === 'GET') {
const users = await db.users.findMany();
return res.json(users);
}
if (req.method === 'POST') {
const user = await db.users.create({ data: req.body });
return res.status(201).json(user);
}
return res.status(405).end();
}ตัวจัดการเส้นทางของตัวจัดการเส้นทางของแอป
ตัวจัดการเส้นทางของแอปใช้ API คำขอและการตอบกลับตามมาตรฐานเว็บ โดยแต่ละเมธอด HTTP จะเป็นการส่งออกที่มีชื่อ
// app/api/users/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
const users = await db.users.findMany();
return NextResponse.json(users);
}
export async function POST(request: Request) {
const body = await request.json();
const user = await db.users.create({ data: body });
return NextResponse.json(user, { status: 201 });
}เส้นทาง API แบบไดนามิก
ส่วนแบบไดนามิกทำงานในลักษณะเดียวกัน: app/api/users/[id]/route.ts จะตรงกับ /api/users/123
// app/api/users/[id]/route.ts
export async function GET(req: Request, { params }: { params: { id: string }}) {
const user = await db.users.findUnique({ where: { id: params.id }});
if (!user) return new Response('Not Found', { status: 404 });
return Response.json(user);
}การอ่านคุกกี้และส่วนหัว
ในตัวจัดการเส้นทางของแอป ให้ใช้ตัวช่วยจาก next/headers ซึ่งทำงานตามขอบเขตของคำขอ
import { cookies, headers } from 'next/headers';
export async function GET() {
const token = cookies().get('token')?.value;
const userAgent = headers().get('user-agent');
// ...
}การตอบกลับแบบสตรีม
ตัวจัดการเส้นทางสามารถส่งคืนการตอบกลับแบบสตรีมได้ เหมาะสำหรับการสร้างคำตอบแชตด้วย AI หรือการสร้างไฟล์ขนาดใหญ่
export async function GET() {
const encoder = new TextEncoder();
const stream = new ReadableStream({
async start(controller) {
for (let i = 0; i < 5; i++) {
controller.enqueue(encoder.encode(`chunk ${i}\n`));
await new Promise(r => setTimeout(r, 500));
}
controller.close();
}
});
return new Response(stream);
}มิดเดิลแวร์ — ทำงานก่อนเส้นทาง
middleware.ts ที่รูทของโครงการจะทำงานก่อนที่คำขอจะไปถึงหน้าหรือเส้นทาง API ใช้สำหรับตรวจสอบสิทธิ์ การเปลี่ยนเส้นทาง การเขียนส่วนหัวใหม่ และการทดสอบ A/B
// middleware.ts
import { NextResponse, type NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const token = request.cookies.get('token');
if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}ตัวจับคู่มิดเดิลแวร์
จำกัดเส้นทางที่มิดเดิลแวร์จะทำงานด้วยการกำหนดค่า matcher
export const config = {
matcher: [
'/dashboard/:path*',
'/api/:path*',
'/((?!_next/static|_next/image|favicon.ico).*)'
]
};รันไทม์ของมิดเดิลแวร์
มิดเดิลแวร์ทำงานบน Edge Runtime ตามค่าเริ่มต้น ซึ่งเป็นสภาพแวดล้อมแยกของ V8 ที่มีน้ำหนักเบา ไม่ใช่ Node แบบเต็มรูปแบบ API ที่ใช้ได้มีจำกัด เช่น ไม่มีโมดูลของ Node อย่าง fs และไม่มีการพึ่งพาแบบเนทีฟ
รูปแบบการตรวจสอบสิทธิ์ด้วยมิดเดิลแวร์
รูปแบบที่ใช้กันทั่วไปคือ ตรวจสอบ JWT ในมิดเดิลแวร์ เปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบหากไม่มีหรือไม่ถูกต้อง และแนบข้อมูลผู้ใช้ (decoded) ไว้ในส่วนหัวคำขอ เพื่อให้เส้นทางถัดไปอ่านได้
import jwt from 'jsonwebtoken';
export function middleware(req: NextRequest) {
const token = req.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', req.url));
try {
const decoded = jwt.verify(token, process.env.SECRET!);
const res = NextResponse.next();
res.headers.set('x-user-id', String(decoded.sub));
return res;
} catch {
return NextResponse.redirect(new URL('/login', req.url));
}
}การจำกัดอัตราในมิดเดิลแวร์
ใช้มิดเดิลแวร์ร่วมกับที่จัดเก็บ KV (Upstash, Vercel KV) เพื่อบังคับใช้การจำกัดอัตราต่อ IP ก่อนที่คำขอจะเข้าสู่ตรรกะ API
เมื่อใดที่ไม่ควรใช้เส้นทาง API
สำหรับไมโครเซอร์วิสแยกต่างหากหรือ API ที่ใช้ร่วมกัน ให้ติดตั้งแบ็กเอนด์จริง เช่น Hono, Express หรือ NestJS เส้นทาง API ของ Next.js เหมาะสำหรับการทำพร็อกซี เว็บฮุก และจุดปลายทางเฉพาะแอป ไม่ใช่สำหรับให้บริการ API สาธารณะแก่ไคลเอนต์อื่น
ตรวจสอบความเข้าใจ
มิดเดิลแวร์ของ Next.js ทำงานที่ใด และกรณีใช้งานที่พบบ่อยที่สุดคืออะไร
ทบทวน: เส้นทาง API และมิดเดิลแวร์
ตัวจัดการเส้นทางแบบหน้า: pages/api พร้อม req/res ตัวจัดการเส้นทางของแอป: app/api/.../route.ts พร้อมการส่งออกเมธอด (GET/POST/ฯลฯ) ที่ใช้ Request/Response อ่านคุกกี้และส่วนหัวผ่าน next/headers การตอบกลับแบบสตรีมใช้ ReadableStream ส่วน middleware.ts ทำงานบน Edge ก่อนเส้นทาง เพื่อจัดการสิทธิ์ การเปลี่ยนเส้นทาง และส่วนหัว การกำหนดค่า matcher ใช้จำกัดเส้นทาง สำหรับ API สาธารณะควรใช้แบ็กเอนด์จริง
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “เส้นทาง API และมิดเดิลแวร์ของ Next.js” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เส้นทาง API และมิดเดิลแวร์ของ Next.js” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เส้นทาง API และมิดเดิลแวร์ของ Next.js”
สร้างปลายทาง API แบบไร้เซิร์ฟเวอร์ในไดเรกทอรี api/ ประมวลผลคำขอใน Route Handlers และเรียกใช้มิดเดิลแวร์แบบเอดจ์สำหรับการยืนยันตัวตนและการเปลี่ยนเส้นทาง คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “เส้นทาง API และมิดเดิลแวร์ของ Next.js” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- Pages Router เทียบกับ App Router
- คอมโพเนนต์เซิร์ฟเวอร์และคอมโพเนนต์ไคลเอนต์
- SSG, SSR และ ISR
- เส้นทาง API และมิดเดิลแวร์ของ Next.js