دمج واجهات برمجة التطبيقات الخارجية في Next.js: RESTful APIs أو GraphQL

في هذا القسم، سنرشدك خلال عملية دمج البيانات الخارجية في Next.js التطبيق الخاص بك عن طريق جلب البيانات من واجهات برمجة التطبيقات أو GraphQL الخدمات RESTful. من خلال دمج واجهات برمجة التطبيقات الخارجية، يمكنك إثراء تطبيقك بالبيانات في الوقت الفعلي وتوفير تجربة مستخدم ديناميكية.

جلب البيانات من RESTful API

تعد واجهات برمجة تطبيقات RESTful طريقة شائعة لاسترداد البيانات من مصادر خارجية. إليك كيفية جلب البيانات من RESTful API في تطبيقك Next.js:

استخدم واجهة fetch برمجة التطبيقات أو المكتبة مثل axios تقديم طلبات HTTP إلى واجهة برمجة التطبيقات الخارجية.

التعامل مع الاستجابة ومعالجة البيانات المستردة من 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 هي لغة استعلام لواجهات برمجة التطبيقات التي تمكنك من طلب البيانات التي تحتاجها بالضبط. لجلب البيانات من 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);  
    });  
}  

خاتمة

يتيح لك دمج واجهات برمجة التطبيقات الخارجية، سواء كانت RESTful أو GraphQL ، الوصول إلى البيانات من مصادر مختلفة وتحسين تطبيقك Next.js بمحتوى حديث وديناميكي. ومن خلال إتقان تكامل واجهة برمجة التطبيقات(API)، يمكنك توفير تجارب مستخدم أكثر ثراءً وجاذبية في تطبيقك.