[NEXT.JS] 없는 페이지 처리(Not Found Page)

개요

Next.JS에서 없는 페이지로 이동할 때, 모든 경로에 대해 동시 처리하는 방법에 대한 내용입니다.

 

[...not_found]

동적 경로(Dynamic Route)로 설정된 페이지 파일로, URL의 일치하지 않는 모든 경로를 처리하는 데 사용됩니다.

[...not_found]는 "Catch-All Route"라고 불리는 동적 경로 패턴을 의미합니다.

 

 

폴더 구조, 코드

src
	app
    		[...not_found]
        		page.js
    		not-found.tsx

 

not-found.tsx

export default function NotFound() {
  return (
    <div className={style.container}>
      <div className={style.contentBox}>
        <div className={style.box}>
          <div className={style.icon}>
            <QuestionCircleOutlined style={{ color: '#20bc7d' }} />
          </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>
  )
}

 

[적용 화면]

 

 

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