[Next.js] Next.js API Routes를 사용하여 RESTful API 구축하기

Next.js는 Next.js의 API Routes를 사용하여 간단한 RESTful API를 구축할 수 있다.

이번 포스팅에서는 Next.js를 사용하여 RESTful API Todo App의 백엔드 로직을 구현하는 방법을 살펴보자.

1. Todos API 설정하기

파일: src/app/api/todos/route.ts

• 먼저, 할 일 관리를 위한 API 엔드포인트를 생성해 보자.
• GET 요청을 통해 모든 할 일을 가져오고, POST 요청을 통해 새로운 할 일을 추가한다.

export async function GET() {
  const response = await fetch("http://localhost:4000/todos");
  const todos = await response.json();
  return new Response(JSON.stringify(todos), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

export async function POST(request: Request) {
  const { title, contents } = await request.json();
  if (!title || !contents) {
    return new Response(
      JSON.stringify({ error: "Title and contents are required." }),
      { status: 400 }
    );
  }

  const response = await fetch("http://localhost:4000/todos", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title, contents, isDone: false }),
  });
  const newTodo = await response.json();

  return new Response(JSON.stringify(newTodo), {
    status: 201,
    headers: { "Content-Type": "application/json" },
  });
}

2. 특정 Todo 항목 관리하기

파일: src/app/api/todos/[id]/route.ts

• 이제 특정 할 일을 조회하고 수정, 삭제할 수 있는 API 라우트를 만들어보자.
• GET 요청을 통해 특정 할 일을 조회하고, PATCH 요청을 통해 할 일의 완료 상태를 업데이트하며, DELETE 요청을 통해 할 일을 삭제한다.

export async function GET(
  request: Request,
  {
    params,
  }: {
    params: {
      id: string;
    };
  }
) {
  const { id } = params;
  const response = await fetch(`http://localhost:4000/todos/${id}`);
  const todo = await response.json();

  if (!todo) {
    return new Response("Todo not found", { status: 404 });
  }

  return new Response(JSON.stringify(todo), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

export async function PATCH(
  request: Request,
  {
    params,
  }: {
    params: {
      id: string;
    };
  }
) {
  const { id } = params;
  const { isDone } = await request.json();

  const response = await fetch(`http://localhost:4000/todos/${id}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ isDone }),
  });
  const updatedTodo = await response.json();

  return new Response(JSON.stringify(updatedTodo), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

export async function DELETE({ params }) {
  const { id } = params;
  await fetch(`http://localhost:4000/todos/${id}`, {
    method: "DELETE",
  });

  return new Response(null, { status: 204 });
}

2. 특정 Todo 항목 관리하기

파일: src/app/api/todos/[id]/comments/route.ts

• 마지막으로, 할 일에 대한 댓글을 조회하고 추가하는 API 라우트를 만들어 보자.
• 특정 할 일에 대한 댓글을 조회하고 추가한다.

// 댓글 조회
export async function GET(
  request: Request,
  {
    params,
  }: {
    params: {
      id: string;
    };
  }
) {
  const { id } = params;
  const response = await fetch(`http://localhost:4000/comments?todoId=${id}`);
  const comments = await response.json();

  return new Response(JSON.stringify(comments), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

// 댓글 추가
export async function POST(
  request: Request,
  {
    params,
  }: {
    params: {
      id: string;
    };
  }
) {
  const { id } = params;
  const { text } = await request.json();

  if (!text) {
    return new Response(JSON.stringify({ error: "Text is required." }), {
      status: 400,
    });
  }

  const newComment = {
    todoId: id,
    text,
    createdAt: new Date().toISOString(),
  };

  const response = await fetch("http://localhost:4000/comments", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(newComment),
  });
  const comment = await response.json();

  return new Response(JSON.stringify(comment), {
    status: 201,
    headers: { "Content-Type": "application/json" },
  });
}