การใช้งาน Using CURL ในภาษา Next.js แบบง่ายๆ

ในยุคดิจิทัลปัจจุบัน โปรแกรมเมอร์ต่างต้องมีเครื่องมือที่ช่วยให้สามารถเรียกดูข้อมูลจาก API และ Server ต่างๆ ได้อย่างง่ายและรวดเร็ว โดยหนึ่งในเครื่องมือที่ได้รับความนิยมอย่างสูงคือ `CURL` ซึ่งเป็นเครื่องมือที่ใช้สำหรับการส่ง HTTP request ซึ่งในภาษา Next.js เราสามารถใช้งาน CURL ผ่าน Library ที่ชื่อว่า `axios` หรือแม้กระทั่ง `fetch` API ที่มีอยู่ใน JavaScript โดยในบทความนี้เราจะพาทุกคนมารู้จักวิธีการใช้งาน CURL ใน Next.js อย่างละเอียด พร้อมทั้งตัวอย่าง code และ use case ในชีวิตจริง

CURL คืออะไร?

CURL (Client URL) เป็นเครื่องมือที่ใช้สำหรับการส่งและรับข้อมูลจาก URL ผ่านโปรโตคอลต่างๆ เช่น HTTP, HTTPS, FTP เป็นต้น มันได้รับความนิยมอย่างมากในหมู่โปรแกรมเมอร์และนักพัฒนาเว็บ เพราะสามารถทำงานได้หลายฟังก์ชัน รวมทั้งการยืนยันตัวตน รับส่งไฟล์ และตรวจสอบสถานะต่างๆ

ติดตั้ง Next.js

ก่อนที่เราจะเริ่มใช้งาน CURL ใน Next.js เรามีขั้นตอนแรกในการติดตั้ง Next.js ดังนี้:

 npx create-next-app my-next-app
cd my-next-app
npm run dev

เมื่อทำการติดตั้งเสร็จเรียบร้อยแล้ว คุณสามารถเปิดเว็บเบราว์เซอร์ที่ https://localhost:3000 เพื่อดูหน้าเว็บเริ่มต้นของคุณ

การใช้ CURL ผ่าน Axios

หนึ่งใน Library ที่นิยมใช้มากในการส่ง HTTP request ในภาษา JavaScript คือ `Axios` ซึ่งมีความสะดวก ใช้งานง่าย และมีฟีเจอร์มากมาย เช่น การยืนยันตัวตน การจัดการข้อผิดพลาด เป็นต้น

เราทำการติดตั้ง Axios โดยใช้คำสั่ง:

 npm install axios

 // pages/index.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Home = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setData(response.data);
      } catch (error) {
        setError(error);
      }
    };

    fetchData();
  }, []);

  if (error) return <div>Error fetching data.</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

อธิบายการทำงานของ Code

ในตัวอย่างด้านบน เราได้สร้าง component ที่ชื่อว่า `Home` ที่จะทำการดึงข้อมูล blog posts จาก API ของ `jsonplaceholder.typicode.com` โดยใน `useEffect` เราได้เรียกใช้ฟังก์ชัน `fetchData` เพื่อทำการ GET request จากเซิร์ฟเวอร์ และทำการจัดเก็บข้อมูลใน state ที่ชื่อว่า `data` ซึ่งจะทำการเรนเดอร์ข้อมูลในรูปแบบของรายการ (list) ถ้าหากเกิดข้อผิดพลาด ข้อความ "Error fetching data." จะถูกแสดงออกมา

ตัวอย่าง Use Case ในโลกความจริง

ลองนึกถึงกรณีของแอพพลิเคชันที่ต้องแสดงข้อมูลข่าวสารในหน้าแรก เช่น เว็บไซต์ข่าวออนไลน์ที่มีการเก็บรวบรวมบทความจากหลายๆ แหล่ง ข่าวใหม่ๆ จะต้องถูกดึงมาแสดงผลในเวลาจริง การใช้งาน CURL ผ่าน Axios จะช่วยทำให้เราสามารถดึงข้อมูลมาได้รวดเร็วและสะดวก นอกจากนี้ข้อมูลที่ดึงมาได้จะถูกจัดการได้อย่างง่ายดายด้วยการควบคุม state ใน React

เจาะลึก CURL ใน Node.js

ในกรณีที่คุณต้องการใช้งาน CURL ใน Node.js โดยตรง โดยไม่ใช้ Library สำเร็จรูปเหมือนกับ Axios ก็สามารถทำได้เช่นกัน โดยใช้โมดูล `child_process` ในการเรียก CURL แต่ในที่นี้เราจะขอแนะนำใช้ Axios หรือ Fetch ที่เป็นทางเลือกที่ง่ายกว่า

สรุป

ในการเรียกดูข้อมูลผ่าน API ด้วยการใช้ CURL หรือ Library ต่างๆ เช่น Axios ใน Next.js นับว่าเป็นวิธีที่สะดวกและมีประสิทธิภาพในการพัฒนาเว็บแอพพลิเคชัน ตั้งแต่การส่ง Request ไปยังเซิร์ฟเวอร์จนถึงการประมวลผลข้อมูลที่ได้รับกลับมา

หากคุณมีความสนใจที่จะเสริมสร้างทักษะในการเขียนโปรแกรม และต้องการความรู้เรื่องเว็บพัฒนาขึ้นไปอีกขั้น ขอเชิญชวนทุกคนร่วมเรียนรู้ที่ EPT (Expert-Programming-Tutor) สถานที่ที่พร้อมจะเป็นเพื่อนคู่คิดให้คุณไปจนถึงความสำเร็จในสายงานสายเทคโนโลยี!

การเรียนรู้ไม่สิ้นสุด! ถ้าคุณอยากก้าวหน้าในสายงานการเขียนโปรแกรม เราพร้อมให้คุณร่วมสร้างอนาคตใหม่ ๆ ไปด้วยกันที่ EPT!

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