Integrace externích rozhraní API v Next.js: RESTful API nebo GraphQL

V této části vás provedeme procesem integrace externích dat do vaší Next.js aplikace načítáním dat z RESTful API nebo GraphQL služeb. Integrací externích rozhraní API můžete obohatit svou aplikaci o data v reálném čase a poskytnout dynamické uživatelské prostředí.

Načítání dat z RESTful API

RESTful API jsou běžným způsobem, jak získat data z externích zdrojů. Zde je návod, jak můžete načíst data z RESTful API ve vaší Next.js aplikaci:

Použijte rozhraní fetch API nebo knihovnu, jako je axios vytváření požadavků HTTP na externí rozhraní API.

Zpracujte odpověď a zpracujte data získaná z 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);  
    });  
}  

Načítání dat ze GraphQL služby

GraphQL je dotazovací jazyk pro API, který vám umožňuje požadovat přesně ta data, která potřebujete. Chcete-li načíst data ze GraphQL služby ve vaší Next.js aplikaci:

K odesílání dotazů do služby použijte GraphQL klientskou knihovnu. apollo-client GraphQL

Definujte GraphQL dotaz a zadejte data, která chcete načíst.

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

Závěr

Integrace externích rozhraní API, ať už RESTful nebo GraphQL, vám umožní přistupovat k datům z různých zdrojů a vylepšit vaši Next.js aplikaci aktuálním a dynamickým obsahem. Zvládnutím integrace API můžete poskytnout bohatší a poutavější uživatelské prostředí ve vaší aplikaci.