존재하지 않는 라우트에 접근하여 "없는 페이지"라고 안내하는 404 페이지나 서버 500 에러의 응답 페이지 또한 customizing할 수 있습니다.

// pages/404.tsx

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

// pages/_error.tsx

import { NextPageContext } from 'next';
import { ErrorProps } from 'next/error';

const Error = ({ statusCode }: ErrorProps) => {
	return (
		<p>
			{statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'}
		</p>
	);
};

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

export default Error;