Išorinių API integravimas į Next.js: RESTful API arba GraphQL

Šiame skyriuje paaiškinsime, kaip integruoti išorinius duomenis į Next.js programą, gaudami duomenis iš RESTful API arba GraphQL paslaugų. Integruodami išorines API, galite praturtinti savo programą realaus laiko duomenimis ir suteikti dinamišką vartotojo patirtį.

Duomenų gavimas iš RESTful API

RESTful API yra įprastas būdas gauti duomenis iš išorinių šaltinių. Štai kaip galite gauti duomenis iš RESTful API savo Next.js programoje:

Norėdami pateikti HTTP užklausas išorinei API, naudokite fetch API arba biblioteką. axios

Tvarkykite atsakymą ir apdorokite duomenis, gautus iš 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);  
    });  
}  

Duomenų gavimas iš GraphQL paslaugos

GraphQL yra API užklausų kalba, leidžianti pateikti užklausą būtent jums reikalingų duomenų. Norėdami gauti duomenis iš GraphQL programos savo Next.js programoje:

Norėdami siųsti užklausas į paslaugą, naudokite GraphQL kliento biblioteką. apollo-client GraphQL

Apibrėžkite GraphQL užklausą, kad nurodytumėte norimus gauti duomenis.

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

Išvada

Integruojant išorines API, nesvarbu, RESTful arba GraphQL, galite pasiekti duomenis iš įvairių šaltinių ir patobulinti Next.js programą naujausiu ir dinamišku turiniu. Įvaldę API integraciją, savo programoje galite teikti turtingesnę ir patrauklesnę naudotojų patirtį.