외부 API 통합 Next.js: RESTful API 또는 GraphQL

Next.js 이 섹션에서는 RESTful API 또는 서비스에서 데이터를 가져와 외부 데이터를 애플리케이션에 통합하는 프로세스를 안내합니다 GraphQL. 외부 API를 통합하면 실시간 데이터로 애플리케이션을 강화하고 동적 사용자 경험을 제공할 수 있습니다.

RESTful API에서 데이터 가져오기

RESTful API는 외부 소스에서 데이터를 검색하는 일반적인 방법입니다. 애플리케이션 의 RESTful API에서 데이터를 가져오는 방법은 다음과 같습니다 Next.js.

외부 API에 HTTP 요청을 하려면 fetch API나 라이브러리를 사용하세요. axios

응답을 처리하고 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);  
    });  
}  

GraphQL 서비스 에서 데이터 가져오기

GraphQL 필요한 데이터를 정확하게 요청할 수 있는 API용 쿼리 언어입니다. GraphQL 애플리케이션 의 서비스 에서 데이터를 가져오려면 다음 안내를 따르세요 Next.js.

서비스에 쿼리를 보내는 것과 GraphQL 같은 클라이언트 라이브러리를 사용하십시오. apollo-client GraphQL

GraphQL 검색하려는 데이터를 지정하는 쿼리를 정의합니다 .

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

결론

RESTful이든 이든 외부 API를 통합하면 GraphQL 다양한 소스의 데이터에 액세스하고 Next.js 최신 동적 콘텐츠로 애플리케이션을 향상할 수 있습니다. API 통합을 마스터하면 애플리케이션에서 더욱 풍부하고 매력적인 사용자 경험을 제공할 수 있습니다.