[javascript] Next.js에서의 예외 처리 방법은 어떤 것이 있나요?

24 Nov 2023

javascript

1. Custom Error Handling 페이지

Next.js는 _error.js 파일을 통해 에러 처리 페이지를 커스텀할 수 있는 기능을 제공합니다. 이 페이지를 사용하여 특정 타입의 에러를 처리하거나 전역 에러 핸들링을 구현할 수 있습니다.

// _error.js

import React from 'react';

class ErrorPage extends React.Component {
  static getInitialProps({ res, err }) {
    // 에러 정보를 받아와서 커스텀 에러 페이지를 렌더링할 수 있습니다.
    return { statusCode: res ? res.statusCode : err ? err.statusCode : null };
  }

  render() {
    const { statusCode } = this.props;
    return (
      <div>
        <h1>{statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'}</h1>
        {/* 커스텀 에러 페이지를 디자인할 수 있습니다 */}
      </div>
    );
  }
}

export default ErrorPage;

2. getServerSideProps() 내에서 예외 처리

getServerSideProps() 함수 내에서 에러가 발생하는 경우, 커스텀 에러 처리 로직을 구현할 수 있습니다. 이는 서버 사이드에서 데이터를 가져오는 로직을 작성할 때 유용합니다.

// pages/some-page.js

export async function getServerSideProps() {
  try {
    // 데이터 가져오는 로직
    const data = await fetch('https://api.example.com/data');
    const jsonData = await data.json();

    return {
      props: {
        data: jsonData,
      },
    };
  } catch (error) {
    console.error('Error occurred while fetching data:', error);
    return {
      props: {
        error: true,
      },
    };
  }
}

export default function SomePage({ data, error }) {
  if (error) {
    // 커스텀 에러 페이지를 렌더링하거나 에러 메시지를 표시할 수 있습니다.
    return <p>Error occurred while fetching data</p>;
  }

  // 데이터를 기반으로 페이지 렌더링 로직
}

이런 식으로 Next.js에서 예외를 처리할 수 있으며, _error.js 를 사용하여 전역적인 에러 핸들링도 구현할 수 있습니다. 추가적으로 Next.js 공식문서를 참고하시면 더 많은 예외 처리 방법을 확인하실 수 있습니다.