[NEXT.JS] 404에러 페이지 처리하기

개요

URL을 잘못 입력하여 발생하는 404(NOT FOUND ERROR)를 전역으로 처리하는 방법에 대해 작성해보았다.

NEXT JS 13의 app router 기준으로 작성된 글이다.

만약 페이지에서 다른 페이지로 이동이 필요하지 않은 경우에는 /src/app/not-found.tsx 만 작성해주면 된다.

 

/src/app/not-found.tsx

import style from './error/404/_module/css/not.found.module.css'

export default function NotFound() {
  return (
    <div className={style.container}>
      <div className={style.contentBox}>
        <div className={style.box}>
          <div className={style.icon}>
            <img src={'/images/common/ico_notice.png'} />
          </div>
          <div className={style.title}>페이지 없음</div>
          <div className={style.content}>
            <div>페이지를 찾을 수 없습니다.</div>
          </div>
        </div>
      </div>
    </div>
  )
}

 

 

 

LINK를 추가할 경우

만약 페이지를 이동시키는 기능을 넣고 싶다면, /src/app/[...not_found] 폴더에 navigation 기능을 추가해야 한다.

이렇게 하지 않고 not-found에서 페이지 이동을 할 경우 render 순서가 변경되었다는 에러가 호출된다.(이걸로 삽질을 많이 했다..)

 

/src/app/[...not_found]/page.tsx

import { notFound } from 'next/navigation'

export default function NotFoundCatchAll() {
  notFound()
}

 

/src/app/not-found.tsx

import style from './error/404/_module/css/not.found.module.css'
import Link from 'next/link'

export default function NotFound() {
  return (
    <div className={style.container}>
      <div className={style.contentBox}>
        <div className={style.box}>
          <div className={style.icon}>
            <img src={'/images/common/ico_notice.png'} />
          </div>
          <div className={style.title}>페이지 없음</div>
          <div className={style.content}>
            <div>페이지를 찾을 수 없습니다.</div>
          </div>
          <div className={style.button}>
            <Link href="/home" legacyBehavior={true}>
              <a>홈으로</a>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}

 

홈으로 버튼을 클릭할 경우 '/' 페이지로 이동하게 된다.

 

 

문의사항이나 피드백은 댓글로 남겨주세요.