การใช้งาน Http Request ด้วย Method POST โดยใช้ JSON ในภาษา Next.js

ในการพัฒนาแอปพลิเคชันเว็บในปัจจุบัน การติดต่อกับ API ผ่าน HTTP requests ถือเป็นเรื่องที่สำคัญอย่างยิ่ง โดยเฉพาะการใช้ POST method ที่นิยมส่งข้อมูลในรูปแบบ JSON ในบทความนี้เราจะมาเรียนรู้การใช้งาน HTTP POST request โดยใช้ Next.js พร้อมกับตัวอย่าง Code และอธิบายการทำงานให้เข้าใจอย่างชัดเจน

ทำความรู้จักกับ Next.js

Next.js เป็น Framework ที่สร้างขึ้นบนพื้นฐานของ React ช่วยให้การพัฒนาแอปพลิเคชันเว็บที่มีความซับซ้อนง่ายขึ้น โดยเฉพาะในการจัดการ Routing และ Server-Side Rendering (SSR) ซึ่งช่วยให้แอปพลิเคชันของคุณโหลดได้รวดเร็วและมี SEO ที่ดีขึ้น

ทำไมต้องใช้ POST Method?

การใช้ POST method มีประโยชน์อย่างมากในหลายกรณี เช่น การส่งข้อมูลที่มีขนาดใหญ่ การอัปโหลดไฟล์ หรือการสร้างข้อมูลใหม่ในฐานข้อมูล ในขณะที่ GET method ใช้สำหรับขอข้อมูล ซึ่งการส่งข้อมูลด้วย POST จะถูกซ่อนใน Body ของ HTTP request ข้อดีคือความปลอดภัยและความเป็นส่วนตัวมากขึ้น

ตัวอย่างการใช้งาน POST Request ใน Next.js

ขั้นตอนที่ 1: ติดตั้ง Next.js

ก่อนอื่นให้คุณเริ่มต้นโปรเจ็กต์ Next.js ด้วยคำสั่งต่อไปนี้:

 npx create-next-app@latest my-next-app
cd my-next-app

ขั้นตอนที่ 2: สร้าง API Route

Next.js รองรับการสร้าง API routes ที่คุณสามารถใช้เพื่อจัดการกับ HTTP requests ได้ ตัวอย่างต่อไปนี้เราจะสร้างไฟล์ `pages/api/submit.js` เพื่อจัดการทำงานของ POST request:

 // pages/api/submit.js
export default function handler(req, res) {
    if (req.method === 'POST') {
        const data = req.body;

        // ประมวลผลข้อมูลที่ส่งมา
        console.log('Received data:', data);

        // ส่ง response กลับ
        res.status(200).json({ message: 'Data received successfully', data });
    } else {
        // หากไม่ใช่ POST request
        res.setHeader('Allow', ['POST']);
        res.status(405).end(`Method ${req.method} Not Allowed`);
    }
}

ในฟังก์ชันดังกล่าว เราจะตรวจสอบว่า request ที่เข้ามาเป็น POST หรือไม่ หากใช่ เราจะอ่านข้อมูลจาก `req.body` และทำบางอย่างกับข้อมูลนั้น (ในที่นี้เราจะพิมพ์ข้อมูลลงใน console) และคืนค่ากลับด้วย JSON response

ขั้นตอนที่ 3: สร้าง Form เพื่อส่งข้อมูล

ต่อไปนี้เราจะสร้างหน้าเว็บที่มีแบบฟอร์มเพื่อส่งข้อมูลไปยัง API route ที่เราสร้างไว้ ในไฟล์ `pages/index.js`:

 // pages/index.js
import { useState } from 'react';

export default function Home() {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [message, setMessage] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();

        const res = await fetch('/api/submit', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ name, email, message }),
        });

        const result = await res.json();
        alert(result.message);
    };

    return (
        <div>
            <h1>Submit Your Info</h1>
            <form onSubmit={handleSubmit}>
                <div>
                    <label>Name:</label>
                    <input
                        type="text"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label>Email:</label>
                    <input
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label>Message:</label>
                    <textarea
                        value={message}
                        onChange={(e) => setMessage(e.target.value)}
                        required
                    />
                </div>
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

ในตัวอย่างนี้เราสร้างฟอร์มที่มีข้อมูลสามอย่าง คือ ชื่อ อีเมล และข้อความ เมื่อผู้ใช้กรอกข้อมูลแล้วกดส่ง ข้อมูลจะถูกส่งไปยัง API route พร้อมกับการจัดการด้วย POST request อย่างที่ได้อธิบายไว้ข้างต้น

ขั้นตอนที่ 4: ทดสอบการใช้งาน

เมื่อคุณทำการสร้างโปรเจ็กต์เสร็จเรียบร้อยแล้ว ให้รันคำสั่งต่อไปนี้ใน Terminal เพื่อทดสอบโปรเจกต์:

 npm run dev

จากนั้นให้เปิดเว็บบราวเซอร์และไปที่ `http://localhost:3000` คุณจะเห็นฟอร์มที่สร้างขึ้น เมื่อลองกรอกข้อมูลและส่ง จะเห็นว่าข้อมูลจะถูกส่งไปยัง console ของแอปพลิเคชัน โดยที่ตอบกลับจาก API จะถูกแจ้งเตือนใน alert ว่าข้อมูลถูกส่งเรียบร้อย

Use Case ในโลกจริง

การใช้งาน POST request ดังกล่าวมีประโยชน์ในหลายทาง เช่น

สรุป

การใช้งาน HTTP POST request ด้วย JSON ใน Next.js นั้นสามารถทำได้ง่าย และเหมาะสมกับการพัฒนาเว็บที่มีความซับซ้อน โดยใช้ API route แบบง่าย ๆ เพื่อจัดการข้อมูลที่ถูกส่งมา สำหรับใครที่ต้องการเรียนรู้การพัฒนาแอปพลิเคชันเว็บเชิงลึกมากขึ้น EPT (Expert-Programming-Tutor) ให้บริการการสอน Programming ทั่วไป รวมถึง Next.js โดยมีคอร์สเรียนที่เป็นประโยชน์สำหรับทุกระดับ ตั้งแต่มือใหม่จนถึงระดับมืออาชีพ หากคุณสนใจสามารถ สมัครเรียนกับเราได้ที่ EPT ได้เลย!

การเริ่มต้นเส้นทางการพัฒนาโปรแกรมอาจดูน่ากลัว แต่ด้วยการเรียนรู้ที่ถูกต้องและแหล่งข้อมูลที่ดี คุณก็สามารถเป็นนักพัฒนาที่ประสบความสำเร็จได้ ขอให้ทุกคนโชคดีและสนุกกับการเรียนรู้!

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