inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 입 크기로 잘라먹는 Next.js

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

app-router route handler 에러 처리방법

204

김용민

작성한 질문수 74

0

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

0

이정환 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',
      },
    );
  }
}

0

김용민

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

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

버셀로 서버 배포 후 접속 시 500 에러 발생

0

66

2

컴포넌트와 레이아웃

0

55

2

@/styles/globals.css'

0

51

2

풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문

0

71

2

next.js 프로젝트

0

68

1

Next.js + Tanstack Query BFF 구조 질문

1

82

2

Next.js 사전렌더링 이해하기 부분

0

84

2

모달 관련 질문

0

88

3

렌더링 관련 질문

0

108

2

중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화

0

97

2

라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.

0

95

2

SSR시 context에 params말고 query를 사용하면 안되나요?

0

107

2

npx prisma db push 시 에러가 뜹니다.

0

131

3

vercel 배포를 실패하였습니다.

0

150

3

Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?

0

93

2

getServerSideProps 함수와 SSR의 관계

0

118

6

없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다

0

93

2

실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.

0

145

2

일반적인 nextjs project architecture에 대하여..

0

120

2

2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?

0

101

2

배포 시 오류 발생

0

111

2

백엔드 서버 오류납니다.

0

107

2

취약점 제거시 nestjs 버전 문제가 생길까요?

0

117

1

eslint.config.mjs 내 rules 어떻게 설정 하나요?

0

130

1