[Next.js] API 만들어 사용하기(API routes)

Next.js 13에서는 API 서버를 쉽게 구현할 수 있는 기능이 추가되어 백엔드 개발이 한층 간편해졌습니다. 이 기능을 활용하면 Express와 같은 외부 라이브러리 없이도 API를 바로 추가할 수 있습니다. 이번 글에서는 Next.js의 API routes를 활용하여 프론트엔드와 백엔드 간의 소통을 어떻게 구현했는지에 대해 소개하겠습니다.

 

Next.js API Routes란?

Next.js에서는 API를 추가할 수 있는 기능을 API routes라고 부릅니다. 이 기능을 통해 pages/api 디렉토리 안에 파일을 생성하면, 해당 파일이 REST API 경로로 자동으로 매핑됩니다. 예를 들어, api/stores라는 디렉토리 안에 파일을 만들면 /api/stores 경로로 접근할 수 있습니다.

 

예시로 폴더구조는 밑에 처럼 작성하고

api/stores

 

 

백엔드 코드 예시

아래는 pages/api/stores 디렉토리에 위치한 API 서버 코드의 예시입니다.

export async function POST(request: Request) {
  try {
    const { userId } = auth();
    const body = await request.json();
    const { name } = body;

    // 인증된 사용자인지 확인
    if (!userId) {
      return new NextResponse("로그인이 필요합니다.", { status: 401 });
    }

    // 가게 이름이 있는지 확인
    if (!name) {
      return new NextResponse("등록하려는 매장 이름이 필요합니다.", {
        status: 400,
      });
    }

    // DB애 가게 만들어서 등록하기
    const store = await db.store.create({
      data: {
        name,
        userId,
      },
    });

    return NextResponse.json(store);
  } catch (error) {
    console.log("[STORES_POST]", error);
    return new NextResponse("Internal Error", { status: 500 });
  }
}

 

위 코드는 POST 요청을 처리하며, 사용자 인증과 입력 데이터 유효성 검사를 통해 가게를 등록합니다. 에러가 발생할 경우 적절한 HTTP 상태 코드와 메시지를 반환합니다.

 

프론트 코드 예시

프론트엔드에서 백엔드 API와 소통하는 부분은 다음과 같이 구현할 수 있습니다.

 

// TODO: 상점 생성하기
const onSubmit = (values: z.infer<typeof formSchema>) => {
  startTransition(async () => {
    try {
      const response = await axios.post("/api/stores", values);
      window.location.assign(`/${response.data.id}`);
    } catch (error) {
      console.error("[STORE_CREATION_ERROR]", error);
      alert("가게 생성 중 문제가 발생했습니다. 다시 시도해주세요.");
    }
  });
};

 

위 코드는 상점 생성 폼을 제출할 때 API 서버로 POST 요청을 보내고, 성공적으로 응답을 받으면 새로운 상점 페이지로 리디렉션합니다. 에러 발생 시에는 사용자에게 알림을 띄워 문제를 안내합니다.

 

느낀 점

Next.js 13의 API routes를 통해 백엔드 서버를 손쉽게 구현하고, 프론트엔드와 원활하게 소통할 수 있었습니다. 이 기능을 활용하면 복잡한 서버 설정 없이도 필요한 API를 빠르게 구축하고, 클라이언트와 서버 간의 효율적인 데이터 처리가 가능했습니다.

 

백엔드 서버 구현의 용이성
API routes를 사용하면서 복잡한 서버 설정 없이도 필요한 API를 빠르게 구축할 수 있었습니다. Next.js의 간편한 파일 기반 라우팅 덕분에, /api 경로 아래에 파일을 추가함으로써 REST API를 손쉽게 만들 수 있었고, 이런 부분에 대해서 개발 속도를 크게 향상시켰습니다. 또한, 서버와 클라이언트 간의 데이터 전송 및 오류 처리 과정을 효율적으로 관리할 수 있었습니다.

 

프론트엔드와의 원활한 소통
프론트엔드에서 API와의 소통을 경험하면서, 클라이언트와 서버 간의 데이터 흐름을 명확히 이해하게 되었습니다. 프론트엔드에서 보내는 요청과 백엔드에서 처리하는 로직 간의 연관성을 깊이 있게 파악할 수 있었고, 이를 통해 클라이언트 측에서의 에러 처리 및 사용자 경험을 개선하는 데 중요한 통찰을 얻었습니다.

 

성장의 기회
이 과정을 통해 백엔드와 프론트엔드 간의 상호작용을 명확히 이해하고, 효율적인 데이터 처리 및 에러 처리를 구현함으로써, 전반적인 개발 역량이 크게 향상된 것 같습니다. 특히, API routes를 통해 서버와 클라이언트 간의 원활한 소통을 직접 경험하면서, 실질적인 문제 해결 능력을 키울 수 있었습니다. 이러한 경험은 앞으로의 프로젝트에서 더욱 효과적으로 활용할 수 있을 것으로 기대됩니다.