自定义错误
404 页面
404 页面可能经常被访问。为每次访问服务器渲染错误页面会增加 Next.js 服务器的负载。这可能导致成本增加和体验变慢。
为了避免上述缺陷,Next.js 默认提供了一个静态的 404 页面,无需添加任何额外文件。
自定义 404 页面
要创建自定义的 404 页面,你可以创建一个 pages/404.js
文件。这个文件在构建时静态生成。
pages/404.js
export default function Custom404() {
return <h1>404 - Page Not Found</h1>
}
须知:如果你需要在构建时获取数据,可以在这个页面中使用
getStaticProps
。
500 页面
为每次访问服务器渲染错误页面会增加响应错误的复杂性。为了帮助用户尽快获得错误响应,Next.js 默认提供了一个静态的 500 页面,无需添加任何额外文件。
自定义 500 页面
要自定义 500 页面,你可以创建一个 pages/500.js
文件。这个文件在构建时静态生成。
pages/500.js
export default function Custom500() {
return <h1>500 - Server-side error occurred</h1>
}
须知:如果你需要在构建时获取数据,可以在这个页面中使用
getStaticProps
。
更高级的错误页面自定义
500 错误由 Error
组件在客户端和服务器端处理。如果你希望覆盖它,可以定义文件 pages/_error.js
并添加以下代码:
function Error({ statusCode }) {
return (
<p>
{statusCode
? `An error ${statusCode} occurred 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
pages/_error.js
仅在生产环境中使用。在开发环境中,你将看到包含调用堆栈的错误,以了解错误的来源。
复用内置错误页面
如果你想渲染内置的错误页面,可以通过导入 Error
组件来完成。
import Error from 'next/error'
export async function getServerSideProps() {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const errorCode = res.ok ? false : res.status
const json = await res.json()
return {
props: { errorCode, stars: json.stargazers_count },
}
}
export default function Page({ errorCode, stars }) {
if (errorCode) {
return <Error statusCode={errorCode} />
}
return <div>Next stars: {stars}</div>
}
如果你想传递文本消息和 statusCode
,Error
组件也接受 title
作为属性。
如果你有自定义的 Error
组件,请务必导入该组件。next/error
导出 Next.js 使用的默认组件。
注意事项
Error
目前不支持 Next.js 的数据获取方法,例如getStaticProps
或getServerSideProps
。_error
,像_app
一样,是保留路径名。_error
用于定义错误页面的自定义布局和行为。通过路由直接访问或在自定义服务器中渲染时,/_error
将渲染 404 页面。
这有帮助吗?