next js error page

404 error page

pages 디렉터리에 404.js 파일을 만든 후 작성

// pages/404.js
export default function Custom404(){
	return <h1>404 - Page Not Found</h1>
}

404.js 커스텀 페이지에 getStaticProps 를 사용할 수 있습니다.

500 error page

pages 디렉터리에 500.js 파일을 만든 후 작성

// pages/500.js
export default function Custom500(){
	return <h1>500 - Server-side error occurred</h1>
}

500.js 커스텀 페이지에 getStaticProps 를 사용할 수 있습니다.

확장된 error page

500 error는 'Error' component로 client-side 와 server-side에서 다룹니다.
해당 error를 재정의 하려면 pages/_error.js 파일을 만든 후 작성하면 됩니다.

function Error({ statusCode }) {
	return (
    	<p>
        	{statusCode
            	? `An error %{statusCode} occured on server`
                : `An error occurred on client`}
        </p>
    )
}

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

export default Error