Kuunganisha API za Nje katika Next.js: API RESTful au GraphQL

Katika sehemu hii, tutakuongoza kupitia mchakato wa kuunganisha data ya nje kwenye Next.js programu yako kwa kuleta data kutoka kwa API au GraphQL huduma za RESTful. Kwa kuunganisha API za nje, unaweza kuboresha programu yako kwa data ya wakati halisi na kutoa uzoefu wa mtumiaji unaobadilika.

Inaleta Data kutoka kwa API ya RESTful

API RESTful ni njia ya kawaida ya kurejesha data kutoka vyanzo vya nje. Hivi ndivyo unavyoweza kupata data kutoka kwa RESTful API katika Next.js programu yako:

Tumia fetch API au maktaba kama vile axios kufanya maombi ya HTTP kwa API ya nje.

Shikilia jibu na uchakate data iliyorejeshwa kutoka kwa 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);  
    });  
}  

Inaleta Data kutoka kwa GraphQL Huduma

GraphQL ni lugha ya maswali kwa API ambayo hukuwezesha kuomba data hasa unayohitaji. Ili kuleta data kutoka kwa GraphQL huduma katika Next.js programu yako:

Tumia GraphQL maktaba ya mteja kama apollo-client kutuma GraphQL hoja kwa huduma.

Bainisha GraphQL swali ili kubainisha data unayotaka kurejesha.

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);  
    });  
}  

Hitimisho

Kuunganisha API za nje, iwe RESTful au GraphQL, hukuruhusu kufikia data kutoka vyanzo mbalimbali na kuboresha Next.js programu yako kwa maudhui ya kisasa na yanayobadilika. Kwa kusimamia ujumuishaji wa API, unaweza kutoa hali bora na ya kuvutia ya mtumiaji katika programu yako.