Integracija zunanjih API-jev v Next.js: RESTful API-je oz GraphQL

V tem razdelku vas bomo vodili skozi postopek integracije zunanjih podatkov v vašo Next.js aplikacijo s pridobivanjem podatkov iz RESTful API-jev ali GraphQL storitev. Z integracijo zunanjih API-jev lahko svojo aplikacijo obogatite s podatki v realnem času in zagotovite dinamično uporabniško izkušnjo.

Pridobivanje podatkov iz API-ja RESTful

API-ji RESTful so običajen način za pridobivanje podatkov iz zunanjih virov. Tukaj je opisano, kako lahko pridobite podatke iz API-ja RESTful v vaši Next.js aplikaciji:

Uporabite fetch API ali knjižnico, na primer axios za pošiljanje zahtev HTTP zunanjemu API-ju.

Obravnavajte odgovor in obdelajte podatke, pridobljene iz API-ja.

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

Pridobivanje podatkov iz GraphQL storitve

GraphQL je poizvedovalni jezik za API-je, ki vam omogoča, da zahtevate točno tiste podatke, ki jih potrebujete. Za pridobivanje podatkov iz GraphQL storitve v vaši Next.js aplikaciji:

Za pošiljanje poizvedb storitvi uporabite GraphQL odjemalsko knjižnico. apollo-client GraphQL

Definirajte GraphQL poizvedbo, da določite podatke, ki jih želite pridobiti.

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

Zaključek

Vključevanje zunanjih API-jev, bodisi RESTful ali GraphQL, vam omogoča dostop do podatkov iz različnih virov in izboljšanje vaše Next.js aplikacije s posodobljeno in dinamično vsebino. Z obvladovanjem integracije API-ja lahko v svoji aplikaciji zagotovite bogatejšo in bolj privlačno uporabniško izkušnjo.