カスタムエラー
404ページ
404ページは非常に頻繁にアクセスされる可能性があります。訪問ごとにエラーページをサーバーサイドレンダリングすると、Next.jsサーバーの負荷が増加します。これにより、コストの増加やエクスペリエンスの低下につながる可能性があります。
上記の落とし穴を回避するために、Next.jsは追加のファイルを追加することなく、デフォルトで静的な404ページを提供します。
404ページのカスタマイズ
カスタム404ページを作成するには、pages/404.jsファイルを作成できます。このファイルはビルド時に静的に生成されます。
export default function Custom404() {
return <h1>404 - Page Not Found</h1>
}知っておくと良いこと: ビルド時にデータを取得する必要がある場合は、このページ内で
getStaticPropsを使用できます。
500ページ
エラーページを訪問ごとにサーバーサイドレンダリングすると、エラーへの応答に複雑さが加わります。ユーザーが可能な限り迅速にエラーに応答できるように、Next.jsは追加のファイルを追加することなく、デフォルトで静的な500ページを提供します。
500ページのカスタマイズ
500ページをカスタマイズするには、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>
}Errorコンポーネントは、titleプロパティも受け付け、テキストメッセージとstatusCodeを渡すことができます。
カスタムErrorコンポーネントをお持ちの場合は、そちらをインポートしてください。next/errorは、Next.jsによって使用されるデフォルトのコンポーネントをエクスポートします。
注意点
Errorは現在、Next.jsのデータ取得メソッド、たとえばgetStaticPropsやgetServerSidePropsはサポートしていません。_errorは、_appと同様に予約されたパス名です。_errorは、エラーページのカスタマイズされたレイアウトと動作を定義するために使用されます。/_errorは、ルーティングで直接アクセスされた場合や、カスタムサーバーでレンダリングされた場合に404をレンダリングします。
役に立ちましたか？