API คืออะไร ทำงานยังไง ตั้งแต่ request กับ response, HTTP method, status code ไปจนถึงการสร้าง API ด้วย Route Handler ใน Next.js และการเก็บ API key ให้ปลอดภัย
Kittipong Chankhotr
ทีมงาน KittiStack
API คือช่องทางที่โปรแกรมหนึ่งใช้ขอข้อมูลหรือสั่งงานโปรแกรมอื่น โดยไม่ต้องรู้ว่าอีกฝั่งทำงานข้างในอย่างไร ถ้าคุณเคยกดล็อกอินด้วย LINE จ่ายเงินผ่าน PromptPay หรือดูพยากรณ์อากาศในแอป คุณใช้ API มาแล้วโดยไม่รู้ตัว บทความนี้อธิบายหลักการ ศัพท์ที่ต้องรู้ และตัวอย่างการสร้าง API ใน Next.js
API ย่อมาจาก Application Programming Interface เปรียบได้กับพนักงานเสิร์ฟในร้านอาหาร คุณ (โปรแกรมที่ขอข้อมูล) ไม่ต้องเข้าครัวเอง แค่สั่งผ่านพนักงานตามเมนูที่ร้านกำหนด แล้วพนักงานเอาผลลัพธ์มาให้ ครัวคือระบบหลังบ้านที่เก็บข้อมูลและประมวลผลจริง ส่วนเมนูคือรายการคำขอที่ API รองรับ
API ส่วนใหญ่บนเว็บทำงานแบบ request กับ response ฝั่งที่ต้องการข้อมูลส่งคำขอไปยัง URL หนึ่ง ฝั่งเซิร์ฟเวอร์ตอบกลับมาพร้อมข้อมูล ซึ่งนิยมใช้รูปแบบ JSON ตัวอย่างการขอข้อมูลสินค้าหมายเลข 1
GET https://api.example.com/products/1
{
"id": 1,
"name": "เสื้อยืด",
"price": 350,
"inStock": true
}บรรทัดแรกคือคำขอ ส่วนก้อนข้อมูลด้านล่างคือคำตอบที่เซิร์ฟเวอร์ส่งกลับ (โดเมนในตัวอย่างเป็นของสมมุติ)
Method | ใช้ทำอะไร | ตัวอย่าง |
|---|---|---|
GET | ขอดูข้อมูล | ดึงรายการสินค้า |
POST | สร้างข้อมูลใหม่ | สร้างคำสั่งซื้อ |
PUT / PATCH | แก้ไขข้อมูลที่มีอยู่ | เปลี่ยนที่อยู่จัดส่ง |
DELETE | ลบข้อมูล | ลบสินค้าออกจากตะกร้า |
เซิร์ฟเวอร์ตอบกลับพร้อมตัวเลข status code บอกผลของคำขอ เจอตัวเลขเหล่านี้บ่อยเวลาเขียนโค้ดเรียก API
Status code | ความหมาย |
|---|---|
200 | สำเร็จ |
201 | สร้างข้อมูลสำเร็จ |
400 | คำขอไม่ถูกต้อง เช่น ส่งข้อมูลไม่ครบ |
401 | ยังไม่ได้ยืนยันตัวตน เช่น ไม่มี token |
403 | ยืนยันตัวตนแล้ว แต่ไม่มีสิทธิ์ทำสิ่งนี้ |
404 | ไม่พบข้อมูลหรือ URL ที่ขอ |
500 | เซิร์ฟเวอร์ฝั่งตอบมีปัญหา |
REST เป็นแนวทางออกแบบ API ที่ใช้ URL แทนทรัพยากร เช่น /products หรือ /products/1 แล้วใช้ HTTP method บอกว่าจะทำอะไรกับทรัพยากรนั้น ข้อมูลที่รับส่งมักเป็น JSON เว็บส่วนใหญ่ที่คุณเจอใช้แนวทางนี้ นอกจาก REST ยังมีรูปแบบอื่น เช่น GraphQL ที่ให้ฝั่งที่ขอเลือกฟิลด์ข้อมูลเองได้ แต่เริ่มต้นเรียนรู้จาก REST เข้าใจง่ายที่สุด
API จำนวนมากต้องแสดงตัวตนก่อนใช้ ผ่าน API key หรือ token ซึ่งเทียบได้กับรหัสผ่านของแอป ข้อควรทำมีดังนี้
ใน Next.js App Router สร้าง API ได้ด้วย Route Handler โดยวางไฟล์ route.ts ในโฟลเดอร์ app/api ตัวอย่างนี้เป็น API สินค้าแบบง่าย ข้อมูลเป็นค่าตายตัวและยังไม่ได้บันทึกลงฐานข้อมูล
// app/api/products/route.ts
import { NextResponse } from "next/server";
const products = [
{ id: 1, name: "เสื้อยืด", price: 350 },
{ id: 2, name: "หมวก", price: 190 },
];
export async function GET() {
return NextResponse.json(products);
}
export async function POST(request: Request) {
const body = await request.json();
if (typeof body.name !== "string" || typeof body.price !== "number") {
return NextResponse.json({ error: "ข้อมูลไม่ถูกต้อง" }, { status: 400 });
}
return NextResponse.json({ id: 3, ...body }, { status: 201 });
}ฝั่งหน้าเว็บเรียกใช้ได้ด้วย fetch ควรเช็กค่า ok ก่อนอ่านข้อมูลเสมอ
const res = await fetch("/api/products");
if (!res.ok) throw new Error("โหลดสินค้าไม่สำเร็จ");
const products = await res.json();ถ้าอยากเริ่มจากพื้นฐาน อ่าน Next.js คืออะไร ก่อนได้
ขึ้นกับผู้ให้บริการ บางเจ้าให้ใช้ฟรีภายในโควต้า บางเจ้าคิดตามจำนวนครั้งที่เรียก ควรอ่านเงื่อนไขและขีดจำกัดของแต่ละเจ้าก่อนนำไปใช้ในงานจริง
API คือช่องทางที่บริการเปิดให้เรียก ส่วน SDK คือชุดโค้ดสำเร็จรูปที่ห่อ API ไว้ให้เรียกใช้สะดวกขึ้นในภาษาที่คุณเขียน
ถ้า API เปิดให้เรียกจากหน้าเว็บได้โดยไม่ใช้ secret ก็ไม่จำเป็น แต่ถ้าต้องใช้ secret key ควรเรียกผ่านฝั่งเซิร์ฟเวอร์ เช่น Route Handler ใน Next.js เพื่อไม่ให้ key หลุดไปที่หน้าเว็บ
API คือช่องทางให้โปรแกรมคุยกัน ส่วนใหญ่บนเว็บทำงานด้วย request และ response แบบ JSON โดยมี HTTP method กับ status code บอกว่าทำอะไรและผลเป็นอย่างไร เรื่องที่ต้องระวังที่สุดคือการเก็บ secret key ฝั่งเซิร์ฟเวอร์ และการตรวจสิทธิ์ทุกคำขอ ถ้าต้องการเว็บแอปที่เชื่อมต่อ API ภายนอกอย่างระบบชำระเงินหรือ LINE ดูบริการ รับทำเว็บแอปพลิเคชัน
Oct 28, 2026