[Next.js] 13.4버전 App라우터 기반, 에러페이지 공식문서 정리

https://nextjs.org/docs/app/building-your-application/routing#file-conventions

Not Found

공식 문서: Next App Router - not-found.js

1. not-found.js파일을 경로 세그먼트에 위치시켜 해당 경로 하위에 대한 not found를 해당 에러페이지로 리다이렉트 시킬 수 있음

2. 해당 not-found.js를 App 자식경로에, 즉, 앱의 최상위 경로에 위치시킬 경우, 모든 경로의 not-found를 이쪽으로 보낼 수 있음. 하지만 1에서처럼 nested가 존재하는 경우 nested not-found가 우선순위가 될 것.

3. Data Fetching: not-found는 기본적으로 서버 컴포넌트임. 해당 NotFound컴포넌트에 비동기 async 마크 해줌으로써, 데이터를 fetch & display할 수 있음.

import Link from 'next/link'
import { headers } from 'next/headers'
 
export default async function NotFound() {
  const headersList = headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  )
}

global-error

이건 뭐징? 쌸라쌸라