การใช้งาน Export Data to JSON ในภาษา Next.js แบบง่าย ๆ

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

JSON คืออะไร?

JSON หรือ JavaScript Object Notation เป็นรูปแบบการเก็บข้อมูลที่ง่ายต่อการอ่านและเขียน โดยมีโครงสร้างเป็นคู่ชื่อและค่า (key-value pairs) JSON ได้รับความนิยมสูงมากในวงการพัฒนาเว็บไซต์ เนื่องจากมีความสามารถในการแลกเปลี่ยนข้อมูลระหว่างเซิร์ฟเวอร์และไคลเอนต์ได้อย่างมีประสิทธิภาพ

ทำไมต้อง Export Data ไปยัง JSON ใน Next.js?

Next.js เป็น framework ที่ใช้สร้างแอปพลิเคชัน React จริงๆ แล้ว ถ้าคุณทำงานกับแอปพลิเคชันที่ต้องการดึงข้อมูลจาก API หรือ Database ในรูปแบบ JSON จะช่วยให้ข้อมูลถูกส่งผ่านไปยัง frontend ได้อย่างรวดเร็วและมีประสิทธิภาพ เรายังสามารถนำข้อมูล JSON มาแสดงผลใน компонентаของ React ได้ง่ายขึ้น

ขั้นตอนการ export data to JSON ใน Next.js

ขั้นตอนที่ 1: สร้าง File API

เริ่มต้นให้เราสร้างไฟล์ API ในโฟลเดอร์ `pages/api` ชื่อว่า `data.js` ซึ่งจะเป็นที่จัดเก็บข้อมูลเราในรูปแบบ JSON

 // pages/api/data.js
export default function handler(req, res) {
  const data = [
    { id: 1, name: "Item 1", description: "This is item 1" },
    { id: 2, name: "Item 2", description: "This is item 2" },
  ];

  res.status(200).json(data);
}

ในโค้ดด้านบน เราได้สร้างฟังก์ชัน `handler` ที่จะส่งข้อมูล JSON กลับไปยังผู้เรียกใช้เมื่อถูกเรียกจาก Client

ขั้นตอนที่ 2: ดึงข้อมูลจาก API

ถัดไปเราจะดึงข้อมูล JSON ที่เราได้สร้างขึ้นมาแล้วใน Component ของเรา โดยใช้ `useEffect` และ `fetch`

 // pages/index.js
import { useEffect, useState } from "react";

export default function Home() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        setItems(data);
      });
  }, []);

  return (
    <div>
      <h1>Items List</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            <h2>{item.name}</h2>
            <p>{item.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

ในโค้ดด้านบน เราใช้ `fetch` เพื่อดึงข้อมูลจาก API ที่เราได้สร้างไว้ เมื่อเราได้ข้อมูลแล้ว เราจะจัดเก็บมันใน state ชื่อ `items` และนำข้อมูลนั้นมาแสดงผลในรูปแบบของ list

ขั้นตอนที่ 3: แสดงข้อมูลบนหน้าเว็บ

สุดท้ายนี้ เราสามารถไปที่หน้า `http://localhost:3000` เพื่อดูผลลัพธ์ได้ โดยข้อมูล JSON ที่เราสร้างในไฟล์ API จะถูกดึงมาและแสดงในรูปแบบ list บนหน้าเว็บ

Use Case ในโลกจริง

คุณอาจสงสัยว่าการ Export Data ไปยัง JSON ใน Next.js มีประโยชน์อย่างไรในโลกจริง? นี่คือตัวอย่างบางประการที่คุณอาจพบเจอ:

สรุป

การ Export Data ไปยัง JSON ใน Next.js เป็นกระบวนการที่ไม่ซับซ้อน ทำให้เราสามารถสร้างแอปพลิเคชันที่มีประสิทธิภาพในการจัดการข้อมูล มีโครงสร้างที่ชัดเจน และสะดวกในการนำมาใช้ต่อไป การใช้ JSON ไม่เพียงแต่ช่วยในเรื่องของการส่งข้อมูล แต่ยังช่วยให้เราเข้าใจโครงสร้างข้อมูลได้ดีขึ้น

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

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

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