Integrering af eksterne API'er i Next.js: RESTful API'er eller GraphQL

I dette afsnit vil vi guide dig gennem processen med at integrere eksterne data i din Next.js applikation ved at hente data fra RESTful API'er eller GraphQL tjenester. Ved at integrere eksterne API'er kan du berige din applikation med realtidsdata og give en dynamisk brugeroplevelse.

Henter data fra en RESTful API

RESTful API'er er en almindelig måde at hente data fra eksterne kilder på. Sådan kan du hente data fra en RESTful API i din Next.js applikation:

Brug fetch API'en eller et bibliotek til axios at lave HTTP-anmodninger til den eksterne API.

Håndtere svaret og behandle de data, der hentes fra API'en.

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

Hentning af data fra en GraphQL tjeneste

GraphQL er et forespørgselssprog til API'er, der gør det muligt for dig at anmode om præcis de data, du har brug for. Sådan henter du data fra en GraphQL tjeneste i din Next.js applikation:

Brug et GraphQL klientbibliotek til apollo-client at sende GraphQL forespørgsler til tjenesten.

Definer GraphQL forespørgslen for at angive de data, du vil hente.

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

Konklusion

Ved at integrere eksterne API'er, uanset om det er RESTful eller GraphQL, kan du få adgang til data fra forskellige kilder og forbedre din Next.js applikation med opdateret og dynamisk indhold. Ved at mestre API-integration kan du give rigere og mere engagerende brugeroplevelser i din applikation.