การรวม API ภายนอกใน Next.js: RESTful API หรือ GraphQL

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

การดึงข้อมูลจาก RESTful API

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

ใช้ fetch API หรือไลบรารีที่ต้องการ axios ส่งคำขอ HTTP ไปยัง API ภายนอก

จัดการการตอบสนองและประมวลผลข้อมูลที่ดึงมาจาก API

import axios from 'axios';  
  
function fetchData() {  
  axios.get('https://api.example.com/data')  
    .then(response => {  
      const data = response.data;  
      // Process the data  
    })  
    .catch(error => {  
      console.error(error);  
    });  
}  

การดึงข้อมูลจาก GraphQL บริการ

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

ใช้ GraphQL ไลบรารีไคลเอนต์เช่น apollo-client ส่ง GraphQL คำถามไปยังบริการ

กำหนด GraphQL แบบสอบถามเพื่อระบุข้อมูลที่คุณต้องการดึงข้อมูล

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';  
  
const client = new ApolloClient({  
  uri: 'https://graphql.example.com',  
  cache: new InMemoryCache(),  
});  
  
function fetchGraphQLData() {  
  client.query({  
    query: gql`  
      query {  
        posts {  
          title  
          content  
        }  
      }  
    `,  
  })  
    .then(result => {  
      const data = result.data;  
      // Process the data  
    })  
    .catch(error => {  
      console.error(error);  
    });  
}  

บทสรุป

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