API Routes 사용하기

Next.js에서는 API Routes라는 기능을 사용하여 서버 사이드에서 API를 처리할 수 있습니다. 이를 통해 API 요청을 직접 핸들링하고 데이터를 반환할 수 있습니다. API Routes를 사용하려면 pages/api 디렉토리에 API 엔드포인트를 작성하면 됩니다. 예를 들어, pages/api/users.js 파일을 만들어 사용자 목록을 가져오는 API를 생성할 수 있습니다.

// pages/api/users.js

export default function users(req, res) {
  const users = ['John', 'Jane', 'Alice'];
  res.status(200).json(users);
}

위의 코드에서는 /api/users 엔드포인트로 GET 요청이 들어오면 users라는 배열을 응답으로 반환합니다.

외부 API 사용하기

Next.js에서 외부 API를 사용하려면 fetch 또는 axios와 같은 HTTP 클라이언트 라이브러리를 활용합니다. 예를 들어, fetch를 사용하여 외부 API에서 데이터를 가져오는 코드는 다음과 같습니다.

export default function MyPage({ data }) {
  return (
    <div>
      {/* 데이터 표시 */}
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

위의 코드에서 getServerSideProps 함수를 사용하여 서버 사이드에서 API를 호출하고 응답 데이터를 MyPage 컴포넌트의 props로 전달합니다. 이렇게 전달된 데이터는 페이지에서 렌더링될 수 있습니다.

SWR 사용하기

SWR은 Next.js용 데이터 fetching 라이브러리입니다. SWR을 사용하면 데이터를 편리하게 가져오고 캐싱하며, 간단한 상태 관리도 가능합니다. 이를 활용하면 API 호출과 데이터 관리를 간소화할 수 있습니다. 예를 들어, swr 패키지를 설치하고 아래와 같이 사용할 수 있습니다.

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function MyPage() {
  const { data, error } = useSWR('https://api.example.com/data', fetcher);

  if (error) return <div>Error occurred</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      {/* 데이터 표시 */}
    </div>
  );
}

위의 코드에서는 useSWR 훅을 사용하여 데이터를 가져오고, fetcher 함수를 통해 데이터를 요청합니다. 데이터는 data 변수에 저장되며, 에러가 발생하면 error 변수가 존재합니다.

이 외에도 Next.js에서는 GraphQL을 사용하는 방법이나 REST API 라이브러리를 활용하는 방법 등 다양한 API 연동 방법이 있습니다. 프로젝트의 요구 사항에 맞게 가장 적합한 방법을 선택하여 API를 연동하시면 됩니다.