1. Custom 404 Page: Next.js는 기본적으로 404 페이지를 제공합니다. 그러나 이를 커스터마이징하여 자신만의 404 페이지를 만들 수도 있습니다. pages 폴더에 404.js (또는 404.tsx) 파일을 생성하고 커스텀 페이지를 작성하면 됩니다.

2. Custom Error Page: 특정 상태 코드에 대한 커스텀 에러 페이지를 만들 수 있습니다. 예를 들어, 404 에러 외에도 500 에러 등을 커스텀 페이지로 대체할 수 있습니다. pages 폴더에 _error.js (또는 _error.tsx) 파일을 생성하고 커스텀 에러 페이지를 작성하면 됩니다.

import React from 'react';

function Error({ statusCode }) {
  return (
    <div>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </div>
  );
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default Error;

위의 예시에서는 statusCode에 따라 서버 측 에러인지 클라이언트 측 에러인지를 판단하고, 적절한 에러 메시지를 보여주는 컴포넌트를 작성합니다.

1. Error Boundary 사용: Next.js에서는 React의 Error Boundary를 활용하여 에러 핸들링을 할 수 있습니다. Error Boundary는 컴포넌트 트리 내에서 에러를 캐치하고 대체 UI를 렌더링하는 역할을 합니다.

import React, { Component, ErrorInfo } from 'react';

class ErrorBoundary extends Component {
  state = {
    hasError: false,
    error: null,
    errorInfo: null,
  };

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    this.setState({
      hasError: true,
      error,
      errorInfo,
    });
  }

  render() {
    if (this.state.hasError) {
      return <div>Error occurred</div>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

위의 예시에서는 componentDidCatch 메서드를 사용하여 에러를 감지하고, hasError 상태를 변경하여 에러를 핸들링하고 있습니다. 해당 ErrorBoundary 컴포넌트를 애플리케이션의 적절한 부분에 적용하면 됩니다.

이외에도 Next.js에서 제공하는 에러 핸들링 API를 사용할 수 있으며, 본인의 애플리케이션에 맞게 최적의 방법을 선택할 수 있습니다. Next.js 공식 문서에서 에러 핸들링에 대한 더 자세한 내용을 확인할 수 있습니다.

참고 자료:

• Next.js 공식 문서 (https://nextjs.org/docs/advanced-features/custom-error-page)
• React 공식 문서 (https://reactjs.org/docs/error-boundaries.html)