Next.js 404 에러 페이지 만들기

 

 

 

Next.js 팀 프로젝트를 진행 중에 404 페이지를 만들게되었다.

 

내 생각엔 뭔가 프레임워크니까

loading.tsx처럼 파일명만 Next.js에서 제공하는대로 쓰면 (예를들어 404.tsx)

404 페이지가 뜨도록 갖춰져 있지 않을까 싶어서 검색해보게 되었다.

 

내 생각이 정답이었다...!!

 

다만 방식이 2가지여서 여러 시도끝에 적용할 수 있었다.

 

Next.js에서 404 페이지 만드는 방법

Next.js는 매우 강력하고 유연한 프레임워크로, 404 페이지를 커스터마이징하여 사용자 경험을 향상시킬 수 있다.

Next.js에서 404 페이지를 만드는 방법과 함께 예상치 못한 오류를 처리하는 방법을 작성해보겠다.

 

1. 404 페이지 만들기

Next.js에서는 pages 디렉토리에 404.js 파일을 추가하여 커스터마이징된 404 페이지를 만들 수 있다.

기본적인 404 페이지를 만들기 위해 다음과 같은 코드를 작성할 수 있다.

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

const Custom404 = () => {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>404 - 페이지를 찾을 수 없습니다</h1>
      <p>요청하신 페이지가 존재하지 않습니다.</p>
    </div>
  );
};

export default Custom404;

 

이 코드는 기본적인 404 페이지를 정의한다.

사용자가 존재하지 않는 페이지를 요청할 때, 위에서 정의한 Custom404 컴포넌트가 렌더링된다.

 

나는 처음에 위와같은 방법으로 하였으나 옛날 포스팅을 봐버린 탓에

내가 쓰고 있는 Next.js의 14버전과 맞지 않는 방법이었다...

(어쩐지 이상하더라... 기본적으로 pages 폴더가 없는데 )

 

 

2. app 디렉토리 구조에서의 404 페이지 처리

Next.js 13 이상 버전에서는 새로운 app 디렉토리 구조를 사용할 수 있다.

이 구조에서는 not-found.js 파일을 만들어 404 페이지를 정의할 수 있다.

// app/not-found.js
import React from 'react';

const NotFound = () => {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>404 - 페이지를 찾을 수 없습니다</h1>
      <p>요청하신 페이지가 존재하지 않습니다.</p>
    </div>
  );
};

export default NotFound;

 

위 코드는 app 디렉토리 구조에서 404 페이지를 정의한 것이다.

기존의 pages 디렉토리 구조와 달리, app 디렉토리에서는 not-found.js 파일을 통해 404 페이지를 관리할 수 있다.

나는 이와 같은 방법으로 프로젝트의 404페이지를 작성하였다.

 

 

3. 예기치 않은 오류 처리하기

Next.js에서는 커스텀 에러 페이지를 만들어 예기치 않은 오류를 처리할 수 있다.

pages 디렉토리에 _error.js 파일을 추가하여 예기치 않은 오류를 처리하는 페이지를 만들 수 있다.

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

const CustomError = ({ statusCode }) => {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>{statusCode} - 에러가 발생했습니다</h1>
      <p>문제가 발생했습니다. 나중에 다시 시도해주세요.</p>
    </div>
  );
};

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

export default CustomError;

 

이 코드는 Next.js 애플리케이션에서 발생하는 예기치 않은 오류를 처리하는 커스텀 에러 페이지를 정의한다. getInitialProps 메서드를 사용하여 에러 상태 코드를 가져와 화면에 출력한다.

 

결론

Next.js에서 404 페이지와 예기치 않은 오류 페이지를 커스터마이징하는 방법을 알아보았다.

Next.js의 강력한 기능을 최대한 많이 활용 해보고싶다.