การใช้งาน Web Server Waiting for HTTP Request ในภาษา Next.js แบบง่ายๆ

ในโลกของการพัฒนาเว็บไซต์ในยุคปัจจุบัน ไม่มีอะไรที่ตอบโจทย์ความต้องการได้ดีไปกว่า Next.js ซึ่งเป็น Framework ที่พัฒนาขึ้นโดยทีมงาน Vercel หนึ่งในคุณสมบัติที่เด่นชัดของ Next.js ก็คือการสร้าง Web Server ที่ตอบสนองต่อ HTTP Requests ได้อย่างมีประสิทธิภาพ ในบทความนี้ เราจะมาเรียนรู้วิธีการตั้งค่าซอร์สโค้ดแบบง่าย ๆ ที่จะทำให้เราสามารถรับ HTTP Requests และตอบสนองได้อย่างเหมาะสม โดยใช้ Next.js

ขั้นตอนการติดตั้ง Next.js

ก่อนที่เราจะเริ่มต้นการพัฒนา เราจำเป็นต้องติดตั้ง Node.js ในเครื่องของเราให้เรียบร้อยก่อน ถ้าหากยังไม่ติดตั้ง สามารถดาวน์โหลดได้ที่ [Node.js Official Website](https://nodejs.org)

เมื่อ Node.js ติดตั้งเรียบร้อยแล้ว ให้เปิดเทอร์มินัลและรันคำสั่งต่อไปนี้เพื่อสร้างโปรเจกต์ใหม่

 npx create-next-app my-next-app
cd my-next-app

ขั้นตอนการสร้าง Web Server

ภายในโปรเจกต์ Next.js เราจะใช้ฟีเจอร์ API routes ที่ใน Next.js นั้นมีไว้ช่วยให้ผู้พัฒนาสามารถสร้าง HTTP API ได้อย่างง่ายดาย โดยเขาสามารถสร้างไฟล์ JavaScript ใหม่ภายใต้โฟลเดอร์ `pages/api` และระบบจะทำการจัดการ HTTP Requests ให้อัตโนมัติ

ตัวอย่างการสร้าง API

ให้เราสร้างไฟล์ `hello.js` ในโฟลเดอร์ `pages/api` ของโปรเจกต์ของเรา:

 // pages/api/hello.js

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'Hello, World!' });
  } else {
    res.setHeader('Allow', ['GET']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

##### อธิบายการทำงานของโค้ด

ในโค้ดข้างต้น เราได้สร้างฟังก์ชัน `handler` ที่รับสองพารามิเตอร์คือ `req` (request) และ `res` (response). เราตรวจสอบได้ว่า ในกรณีที่คำขอ HTTP เป็นแบบ `GET` เราจะส่งกลับ JSON object ที่มีข้อความ `Hello, World!` โดยมีสถานะ 200 (OK) หากเป็นคำขอที่ไม่ใช่ `GET` เราจะส่งกลับสถานะ 405 (Method Not Allowed) และแสดงวิธีการที่รองรับ

การทดสอบ API

เพื่อทดสอบ API ที่เราเพิ่งสร้างขึ้น ให้เรารันโปรเจกต์ด้วยคำสั่งต่อไปนี้ในเทอร์มินัล:

 npm run dev

เปิดเว็บเบราว์เซอร์และไปที่ URL `http://localhost:3000/api/hello` คุณจะพบกับข้อความ `{"message":"Hello, World!"}` ที่ส่งกลับจาก API ของเรา

Use Case ในโลกจริง

การสร้าง Web Server ที่รอรับ HTTP Request เช่นนี้ มีประโยชน์หลายประการที่สามารถอธิบายได้ผ่าน Use Case ที่เกิดขึ้นในโลกจริง:

สรุปและชักชวนให้เรียนรู้ที่ EPT

การเขียนเว็บเซิร์ฟเวอร์ใน Next.js ไม่เพียงแต่เป็นเรื่องง่าย แต่ยังเป็นทักษะที่จำเป็นในยุคดิจิทัลเพื่อเชื่อมต่อความต้องการของผู้ใช้กับข้อมูลที่เรามีอยู่ นอกจากนี้ คุณยังสามารถนำหลักการนี้ไปประยุกต์ใช้กับโปรเจกต์ต่าง ๆ ในอนาคตได้อีกด้วย

หากคุณสนใจในการเรียนรู้เกี่ยวกับการพัฒนาโปรแกรมแบบลึกซึ้ง ไม่ว่าจะเป็น Frontend, Backend หรือ Full Stack เราขอเชิญคุณเข้ามาศึกษาร่วมกับเราได้ที่ EPT (Expert-Programming-Tutor) สถาบันที่มีผู้สอนที่มีประสบการณ์ในการพัฒนาซอฟต์แวร์มากมาย พร้อมหลักสูตรที่ทันสมัยและตรงตามความต้องการของตลาดงาน คุณจะได้พบกับการเรียนรู้ที่สนุก และช่วยพัฒนาทักษะที่สามารถนำไปใช้กับการทำงานจริงได้อย่างมีประสิทธิภาพ

พร้อมแล้วไหม? มาร่วมกันสร้างอนาคตในสายงานโปรแกรมเมอร์ไปกับเราที่ EPT!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง