Integriranje vanjskih API-ja u Next.js: RESTful API-je ili GraphQL

U ovom odjeljku vodit ćemo vas kroz proces integracije vanjskih podataka u vašu Next.js aplikaciju dohvaćanjem podataka iz RESTful API-ja ili GraphQL usluga. Integracijom vanjskih API-ja možete obogatiti svoju aplikaciju podacima u stvarnom vremenu i pružiti dinamično korisničko iskustvo.

Dohvaćanje podataka iz RESTful API-ja

RESTful API-ji uobičajeni su način za dohvaćanje podataka iz vanjskih izvora. Evo kako možete dohvatiti podatke iz RESTful API-ja u svojoj Next.js aplikaciji:

Koristite fetch API ili biblioteku poput axios postavljanja HTTP zahtjeva vanjskom API-ju.

Rukovanje odgovorom i obrada podataka dohvaćenih 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);  
    });  
}  

Dohvaćanje podataka iz GraphQL usluge

GraphQL je jezik upita za API-je koji vam omogućuje da zatražite točno one podatke koji su vam potrebni. Za dohvaćanje podataka iz GraphQL usluge u vašoj Next.js aplikaciji:

Koristite GraphQL biblioteku klijenta kao što apollo-client je slanje GraphQL upita usluzi.

Definirajte GraphQL upit kako biste odredili podatke koje želite dohvatiti.

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čak

Integracija vanjskih API-ja, bilo RESTful ili GraphQL, omogućuje vam pristup podacima iz različitih izvora i poboljšanje vaše Next.js aplikacije ažuriranim i dinamičnim sadržajem. Savladavanjem integracije API-ja možete pružiti bogatija i zanimljivija korisnička iskustva u svojoj aplikaciji.