Next.js는 React 기반의 프레임워크로, 파일 기반 라우팅 시스템과 서버 사이드(SSR) 기능을 제공한다. 이 글에서는 Next.js를 사용하여 RESTful API를 구축하고, 이를 클라이언트에서 호출하여 데이터를 가져오는 방법을 예제를 통해 알아보겠다.

데이터베이스 연결 설정

---

이전 글에서 MongoDB를 연결하는 방법을 알아보았다. 그 중, Mongoose를 통한 DB 연결을 할 것이다.

Next.js 에서 MongoDB 연결 방법

// app/lib/utils.js

import mongoose from 'mongoose';

const connection = {};

export const connectToDb = async () => {
  try {
    if (connection.isConnected) {
      console.log('Using existing connection');
      return;
    }
    const db = await mongoose.connect(process.env.MONGO);
    connection.isConnected = db.connections[0].readyState;
  } catch (error) {
    console.log(error);
    throw new Error(error);
  }
};

API 정의

---

이제 Next.js의 API Routes 기능을 사용하여 블로그 포스트를 가져오는 API를 정의한다. 이를 위해 app/api/blog/[slug]/route.js 파일을 생성하고, 특정 슬러그(slug)에 해당하는 포스트를 데이터베이스에서 가져오는 GET 핸들러를 작성한다.

// app/api/blog/[slug]/route.js

import { Post } from '@/lib/models';
import { connectToDb } from '@/lib/utils';
import { NextResponse } from 'next/server';

export const GET = async (request, { params }) => {
  const { slug } = params;
  try {
    await connectToDb();

    const post = await Post.findOne({ slug });
    return NextResponse.json(post);
  } catch (err) {
    console.log(err);
    throw new Error('Failed to fetch post!');
  }
};

API 사용

---

API를 정의한 후, 클라이언트 측에서 이 API를 호출하여 데이터를 가져오는 방법을 살펴보겠다. 이를 위해 app/blog/[slug]/page.jsx 파일을 생성하고, 해당 파일에서 특정 슬러그에 대한 블로그 포스트 데이터를 가져와 렌더링한다.

// app/blog/[slug]/page.jsx

const getData = async (slug) => {
  const res = await fetch(`http://localhost:3000/api/blog/${slug}`);

  if (!res.ok) {
    throw new Error('Something went wrong!');
  }

  return res.json();
};

export default async function SinglePost({ params }) {
  const { slug } = params;
  const post = await getData(slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

전체 코드 구조

---

이번 예제에서 사용한 전체 코드 구조는 다음과 같다.

/app
  /api
    /blog
      [slug]
        route.js
  /blog
    [slug]
      page.jsx
      
      
/lib
  utils.js
  models.js

결론

---

이번 글에서는 Next.js를 사용하여 RESTful API를 정의하고, 이를 클라이언트에서 호출하여 데이터를 가져오는 방법을 블로그 포스트 예제를 통해 알아보았다. Next.js의 파일 기반 라우팅 시스템을 활용하면 API 엔드포인트와 페이지 컴포넌트를 효율적으로 관리할 수 있다.