Next.js에서 사용자 지정 404 페이지 만들기

8일차, Blogvent에 오신 것을 환영합니다!

Next.js 애플리케이션을 충분히 사용하고 새로운 경로를 탐색해 본 적이 있다면 이 오류 페이지에 익숙할 것입니다.



잘 디자인된 심플한 페이지지만 나만의 브랜딩을 추가하고 링크를 걸고 싶다면? 운 좋게도 그들은 그것을 생각했고 404.js 디렉토리 안에 pages/ 파일을 추가하는 것만 큼 간단합니다.

다음은 수행할 수 있는 작업의 간단한 예입니다.

// 404.js
import Link from 'next/link'

export default function FourOhFour() {
  return <>
    <h1>404 - Page Not Found</h1>
    <Link href="/">
      <a>
        Go back home
      </a>
    </Link>
  </>
}

이것은 Next.js의 다른 페이지 구성 요소와 같기 때문에 원하는 스타일, 링크, 데이터 또는 사본을 추가할 수 있습니다.

다른 오류의 경우 _error.js 디렉토리에 있는 pages/ 파일로 똑같은 작업을 수행할 수 있습니다! 404 오류는 항상 정적으로 생성되지만 다른 오류는 서버에 의존하기 때문에 특별합니다.Netlify에서 Next.js의 서버 렌더링 측면을 사용하려면 our one-click install build plugin을 확인하십시오.

사용자 정의 Next.js 404 페이지를 실행하고 싶습니까? Take a look at the 404 page on Jamstack Explorers ! 할 수도 있습니다check out the code here.