logo

JEONGGON

    블로그
github
mode
목 차
down-arrow

Next.js 에러

2024.02.19.

post-thumbnail

Error Handling

1. 에러 발생

  • 인위적으로 fetch하는 컴포넌트에서 fetch하지 않고 에러 발생시키기
// app/components/movie-videos.tsx

async function getVideos(id: string) {
  await new Promise((response) => setTimeout(response, 3000));
  // 에러 보내기
  throw new Error('something broke...')
}

export default async function MovieVideos({ id }: { id: string }) {
  const videos = await getVideos(id);
  return <h6>{JSON.stringify(videos)}</h6>
}

에러 발생
에러 발생 시키기



2. 에러 처리 - error.tsx

  • 에러 발생 시, 사용자가 다른 페이지로 돌아갈 수 있도록 처리하기
  • 에러 발생 페이지 폴더에 error.tsx 파일 생성하기
// app/(movies)/movies/[id]/error.tsx

"use client";

export default function Error() {
  return <h1>lol something broke...</h1>;
}
  • error.tsx 파일의 컴포넌트 이름은 아무거나 상관없으나, 파일 명은 무조건 error.tsx여야 함
  • error.tsx 파일에는 반드시 use client가 필요함
    • 없을 경우, 에러 발생
  • 이렇게 하면 에러 발생 시, 기존 페이지 대신 error 컴포넌트를 보여줌

error 컴포넌트 출력
error 발생 시, error 컴포넌트 출력

nextjsframeworkreacterror
profile

조정곤

주니어 프론트엔드 개발자

github
linkedin
instagram
email

< 이전글

Next.js CSS modules

다음글 >

Next.js Suspense

Nextjs 포스트 (13)

down-arrow