린찬승하우스: 17 에러 처리 및 디버깅 – Next.js 애플리케이션에서 에러를 처리하는 방법

2025년 1월 18일 토요일

17 에러 처리 및 디버깅 – Next.js 애플리케이션에서 에러를 처리하는 방법

Next.js 애플리케이션을 개발하는 동안, 다양한 에러가 발생할 수 있습니다. 이러한 에러를 효과적으로 처리하고 디버깅하는 방법을 배우는 것은 개발자에게 매우 중요한 기술입니다. 이번 글에서는 Next.js에서 발생할 수 있는 에러를 처리하는 방법과 이를 디버깅하는 다양한 기법을 소개하겠습니다.

Next.js, 에러 처리, 디버깅, ErrorBoundary, 클라이언트 측 에러, 서버 측 에러, React, Next.js 디버깅, 에러 페이지, 환경 변수

1. Next.js 에러 처리 기본 개념

Next.js에서는 다양한 종류의 에러가 발생할 수 있습니다. 그 중에서 가장 흔한 에러는 컴파일 에러와 런타임 에러입니다. 컴파일 에러는 코드가 잘못 작성되어 빌드 단계에서 문제가 발생하는 경우 발생하며, 런타임 에러는 애플리케이션 실행 중에 발생하는 오류입니다. 이러한 에러는 보통 콘솔에 출력되거나 페이지가 제대로 렌더링되지 않는 현상으로 나타납니다.

Next.js에서는 이러한 에러를 처리하기 위해 몇 가지 기본적인 방법을 제공합니다.

2. 오류 페이지 사용하기

Next.js는 기본적으로 pages/_error.js 파일을 사용하여 애플리케이션 전반의 에러를 처리합니다. 이 파일은 서버 측에서 발생한 에러와 클라이언트 측에서 발생한 에러 모두를 처리할 수 있습니다. 이 파일을 사용하여 커스텀 에러 페이지를 작성할 수 있습니다.


// pages/_error.js
import React from 'react';

function ErrorPage({ statusCode }) {
  return (
    <div>
      <h1>{statusCode ? `An error ${statusCode} occurred` : 'An error occurred'}</h1>
    </div>
  );
}

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

export default ErrorPage;

위 코드에서는 에러 발생 시 상태 코드에 맞는 메시지를 출력하는 간단한 에러 페이지를 만들었습니다. getInitialProps 메서드를 사용하여 서버 측에서 발생한 에러 정보를 가져올 수 있습니다.

3. 클라이언트 측 에러 핸들링

Next.js에서는 클라이언트 측에서 발생한 에러를 처리하기 위해 ErrorBoundary를 활용할 수 있습니다. ErrorBoundary는 React의 기능으로, 컴포넌트 트리에서 자식 컴포넌트에서 발생한 에러를 포착하고 해당 에러를 처리할 수 있게 해줍니다.


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('Error caught in ErrorBoundary:', error);
    console.error('Error info:', info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

이 컴포넌트를 사용하여 자식 컴포넌트에서 발생한 에러를 처리하고, 사용자에게 오류 메시지를 보여줄 수 있습니다.

4. Next.js 디버깅 기법

디버깅은 개발에서 매우 중요한 과정입니다. Next.js에서는 다양한 디버깅 기법을 사용할 수 있습니다. 그 중 몇 가지를 소개하겠습니다.

콘솔 출력 활용하기: JavaScript의 console.log()를 활용하여 애플리케이션의 흐름을 추적할 수 있습니다. 클라이언트 측 코드나 서버 측 코드에서 발생하는 문제를 추적할 때 유용합니다.
React 개발자 도구 사용: React 개발자 도구를 사용하여 컴포넌트 상태나 props를 실시간으로 확인하고, 상태 변화에 따라 애플리케이션이 어떻게 작동하는지 추적할 수 있습니다.
Next.js 빌드 시 에러 메시지 확인하기: 빌드 시 발생하는 에러 메시지를 확인하고, 해당 에러가 발생한 위치를 찾아서 수정할 수 있습니다. next build 명령어를 실행하면 빌드 중에 발생한 에러를 콘솔에서 확인할 수 있습니다.

5. 환경 변수와 에러 처리

환경 변수를 잘못 설정하면 애플리케이션에서 예상치 못한 에러가 발생할 수 있습니다. 이를 방지하기 위해 Next.js에서는 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다.


NEXT_PUBLIC_API_URL=https://api.example.com

이 변수를 코드에서 사용하려면 process.env.NEXT_PUBLIC_API_URL로 접근할 수 있습니다. 올바르게 설정되었는지 확인하려면, 이를 콘솔에 출력하거나 API 요청을 통해 실제로 데이터가 잘 전달되는지 확인할 수 있습니다.

6. 결론

Next.js에서의 에러 처리와 디버깅은 중요한 부분입니다. 이 글에서 소개한 에러 처리 방법을 통해 애플리케이션에서 발생할 수 있는 다양한 에러를 예방하고, 디버깅 기법을 사용하여 문제를 빠르게 해결할 수 있습니다. Next.js의 강력한 기능들을 활용하여 효율적으로 에러를 관리하고, 안정적인 애플리케이션을 만들어 보세요.

린찬승하우스