app-router route handler 에러 처리방법

한 입 크기로 잘라먹는 Next.js(15+)

7.6) 클라이언트 컴포넌트에서의 서버액션

작성

import { type NextRequest, NextResponse } from 'next/server';

import { fetchData } from '@/shared/apis/fetch-data';
import type { IAcademyCreateDTO, IPostEnrollAcademyResponse } from '@/shared/types/acadmy';

export async function POST(req: NextRequest) {
  const body = (await req.json()) as Promise<IAcademyCreateDTO>;

  const data = await fetchData<IPostEnrollAcademyResponse>('/api/v1/academies', 'POST', body);

  if (!data.isSuccess) {
    return NextResponse.json(
      {},
      {
        status: 500,
        statusText: data.message,
      },
    );
  }

  return NextResponse.json(data);
}

서버에, 에러시 아래와 같은 데이터 구조를 준다고 했을떄 위의 방식처럼, 에러 핸들링을 하는 것이 맞는지 궁금합니다... Route Handler의 보편적인 에러처리 방식이 너무 궁금합니다!! (직접 에러 메시지를 작성하는것이 아닌 서버에서 내려주는 에러메시지를 화면에 표기하고 싶습니다.)

export type CommonResponse<T = unknown> = {
  code: string;
  isSuccess: boolean;
  message: string;
  result: T;
};

react typescript next.js

답변 1

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

data.isSuccess를 활용해 에러 메세지를 전달해 주시는 건 좋은 방법인것 같습니다. 그러나 여기서 한가지만 추가하자면 try catch 블록을 묶어서 혹시나 모를 예외까지 함께 처리해주시면 더 좋을 것 같아요

import { type NextRequest, NextResponse } from 'next/server';

import { fetchData } from '@/shared/apis/fetch-data';
import type { IAcademyCreateDTO, IPostEnrollAcademyResponse, CommonResponse } from '@/shared/types/academy';

export async function POST(req: NextRequest) {
  try {
    const body = (await req.json()) as IAcademyCreateDTO;

    const data = await fetchData<CommonResponse<IPostEnrollAcademyResponse>>('/api/v1/academies', 'POST', body);

    if (!data.isSuccess) {
      // 서버에서 제공하는 에러 메시지와 상태 코드를 그대로 사용하여 클라이언트에 전달
      return NextResponse.json(
        { message: data.message, code: data.code },
        {
          status: 500,
          statusText: data.message,
        },
      );
    }

    return NextResponse.json(data.result);
  } catch (error) {
    // 예상하지 못한 에러를 잡아내고, 클라이언트에 기본 메시지와 상태 코드를 전달
    console.error('Unexpected error:', error);

    return NextResponse.json(
      { message: 'An unexpected error occurred.' },
      {
        status: 500,
        statusText: 'Internal Server Error',
      },
    );
  }
}

김용민

질문자

친절한 답변 감사합니다! 혹시, 모든 서버 API에 대응해서, 이런 식으로 Routes Handler를 구성하는 것이 좋은 방법인가요??

어떠한 경우에, Routes Handler를 구성하는지 조금 명확한 조건을 알고 싶습니다!

인프런 커뮤니티 질문&답변

app-router route handler 에러 처리방법