Next.js와 그래프 데이터베이스 연동

18 Oct 2023

nextjs

Next.js는 React 기반의 서버 사이드 렌더링 프레임워크로, 클라이언트와 서버 간의 데이터 통신이 필요한 경우가 많습니다. 그래프 데이터베이스는 관계형 데이터베이스보다 유연한 데이터 구조를 제공하고, Next.js 애플리케이션과의 연동이 간단하다는 장점이 있습니다. 이번 블로그 포스트에서는 Next.js와 그래프 데이터베이스를 연동하는 방법에 대해 알아보겠습니다.

그래프 데이터베이스란?

그래프 데이터베이스는 현실 세계의 데이터를 그래프 형태로 저장하고 쿼리하는 방식을 제공하는 데이터베이스입니다. 그래프 데이터베이스는 노드(node)와 엣지(edge)라는 개념을 사용하여 데이터를 표현하며, 노드와 엣지의 관계를 통해 데이터 간의 관계를 표현할 수 있습니다.

Next.js와 그래프 데이터베이스 연동 방법

Next.js에서 그래프 데이터베이스와 연동하기 위해서는 클라이언트와 서버에서의 데이터 통신 방법을 결정해야 합니다. 일반적으로 REST API를 사용하여 데이터를 주고받는 방식이 많이 활용되지만, 그래프 데이터베이스는 GraphQL을 사용하여 데이터를 요청하고 응답받는 것이 일반적입니다.

1. GraphQL 서버 설정

먼저, Next.js 애플리케이션에서 GraphQL을 사용하기 위해 GraphQL 서버를 설정해야 합니다. 여기에서는 Apollo Server를 사용하여 GraphQL 서버를 설정하는 예시를 보겠습니다.

import { ApolloServer, gql } from 'apollo-server-micro';

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello, world!',
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

export const config = {
  api: {
    bodyParser: false,
  },
};

export default server.createHandler({ path: '/api/graphql' });

2. GraphQL 요청

Next.js에서 GraphQL 요청을 보내기 위해서는 Apollo Client를 사용할 수 있습니다. 아래 예시 코드는 React 컴포넌트에서 Apollo Client를 사용하여 GraphQL 요청을 보내는 예시입니다.

import { useQuery, gql } from '@apollo/client';

const GET_HELLO = gql`
  query {
    hello
  }
`;

const MyComponent = () => {
  const { loading, error, data } = useQuery(GET_HELLO);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return <p>{data.hello}</p>;
};

export default MyComponent;

3. 데이터 표시

GraphQL 요청을 통해 받아온 데이터를 Next.js 애플리케이션에서 표시하려면 간단히 가져온 데이터를 렌더링하면 됩니다.

import { useQuery, gql } from '@apollo/client';

const GET_HELLO = gql`
  query {
    hello
  }
`;

const MyComponent = () => {
  const { loading, error, data } = useQuery(GET_HELLO);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return <p>{data.hello}</p>;
};

const Home = () => {
  return (
    <div>
      <h1>Hello Next.js</h1>
      <MyComponent />
    </div>
  );
};

export default Home;

마무리

이번 포스트에서는 Next.js와 그래프 데이터베이스를 연동하는 방법을 알아보았습니다. Next.js와 GraphQL을 사용하여 데이터 요청 및 응답을 처리할 수 있고, 그래프 데이터베이스의 유연한 데이터 구조를 활용하여 웹 애플리케이션을 더욱 쉽게 구축할 수 있습니다.

더 많은 정보를 원하시면 Next.js 공식 문서와 Apollo Client 공식 문서를 참고하시기 바랍니다.

#nextjs #graphql