การใช้งาน Calling API ในภาษา Next.js: การพัฒนาเว็บไซต์ที่เชื่อมต่อข้อมูล**

การพัฒนาเว็บไซต์ในยุคปัจจุบันนั้น เกือบทุกเว็บไซต์ที่เรามักจะพบเจอล้วนแล้วแต่มีการเชื่อมต่อกับ API กันแทบทั้งสิ้น โดยเฉพาะในยุคของการพัฒนาโปรแกรมด้วย JavaScript และ Framework ที่กำลังเป็นที่นิยมอย่าง Next.js ซึ่งเป็น Framework ที่ช่วยให้การสร้างแอพพลิเคชันเว็บเป็นเรื่องง่าย รวดเร็ว และมีประสิทธิภาพ

ในบทความนี้เราจะมาทำความรู้จักกับการใช้งาน Calling API ใน Next.js และดูว่าการเชื่อมต่อกับ API สามารถช่วยอะไรเราได้บ้าง พร้อมตัวอย่างโค้ดและกรณีการใช้งานในโลกจริง!

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

Next.js เป็น framework ที่พัฒนาขึ้นจาก React.js ที่ช่วยให้การสร้างแอพพลิเคชัน เว็บ ที่มีฟังก์ชันต่าง ๆ ที่หลากหลายและซับซ้อนได้ง่ายขึ้น โดย Next.js มีข้อดีที่สำคัญได้แก่:

1. **Server-Side Rendering (SSR)** และ **Static Site Generation (SSG)**: ช่วยให้การโหลดข้อมูลรวดเร็วและเหมาะสมกับ SEO

การเรียกใช้ API ใน Next.js

หากคุณต้องการดึงข้อมูลจาก API ใน Next.js ก็สามารถทำได้หลายวิธี และหนึ่งในวิธีที่นิยมคือการใช้ `getServerSideProps` หรือ `getStaticProps` ในการดึงข้อมูลเมื่อเราเรียกใช้เพจต่าง ๆ ตัวอย่างเช่น:

 // pages/index.js
import React from 'react';

const HomePage = ({ data }) => {
    return (
        <div>
            <h1>ข้อมูลจาก API</h1>
            <ul>
                {data.map(item => (
                    <li key={item.id}>{item.title}</li>
                ))}
            </ul>
        </div>
    );
};

export async function getStaticProps() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await res.json();

    return {
        props: { data }, // จะส่งข้อมูลไปยัง HomePage
    };
}

export default HomePage;

ทำความเข้าใจกับโค้ด

ในโค้ดด้านบน เราได้สร้างเพจ `index.js` ซึ่งเป็นหน้าแรกของเว็บไซต์ โดยใช้ฟังก์ชัน `getStaticProps` ในการดึงข้อมูลจาก API ที่ใช้ URL `https://jsonplaceholder.typicode.com/posts`

Use Case ในโลกจริง

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

Use Case: เว็บไซต์ขายของออนไลน์

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

ตัวอย่างโค้ดเพิ่มเติม

ถ้าเราต้องการแสดงรายละเอียดของสินค้าท่านสามารถสร้าง เพจที่ชื่อว่า `product/[id].js` เพื่อให้สามารถดูรายละเอียดสินค้าทีละรายการ:

 // pages/product/[id].js
import React from 'react';

const ProductDetail = ({ product }) => {
    return (
        <div>
            <h1>{product.title}</h1>
            <p>{product.description}</p>
            <p>ราคา: {product.price}</p>
        </div>
    );
};

export async function getStaticPaths() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    const products = await res.json();

    const paths = products.map(product => ({
        params: { id: product.id.toString() }
    }));

    return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
    const product = await res.json();

    return { props: { product } };
}

export default ProductDetail;

สรุป

ในบทความนี้เราได้ทำความเข้าใจเกี่ยวกับการใช้งาน Calling API ใน Next.js ตั้งแต่การติดตั้งไปจนถึงการสร้างเพจและดึงข้อมูลจาก API นอกจากนี้ยังเห็นภาพด้านการใช้งานจริงด้วยกรณีศึกษาต่าง ๆ ที่เกี่ยวข้อง

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

อย่ารอช้า! มาเริ่มต้นการเรียนรู้และพัฒนาทักษะการเขียนโปรแกรมของคุณได้ที่ EPT กันเถอะ!

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