はじめに
現在取り組んでいるプロジェクトで
自作のエラーページを作成することになったので
Next.jsを使って簡単にエラーページの作成をしてみます。
概要
エラーページとは？
何らかのエラーが発生した場合にクライアントに返されるコンテンツです。
HTTPステータスコードは3桁の数字で、
Webブラウザに対してページのステータスに関する情報を提供します。
今回はエラーでよく表示される404,500について説明します。
404エラー
404（Not Found)エラーとは、WEBサイトにアクセスする際、
リンク切れやそもそも存在していない場合に、表示されるエラーページのことです。
500エラー
500（Internal Server Error）エラーとは、サーバー側に発生した問題によって、リクエストが処理されなかったことを示すエラーページのことです。
サーバーにエラーの原因がある状態であるため、
サイトを訪問したユーザーが対処をすることはできません。
環境準備
404エラーページ
デフォルトで Next.js が用意してくれていますが、
not-found.tsxを/appに作成することでオリジナルの404ページを作成できます。
not-found.tsx
export default function NotFound() {
return <h1>404 - Page Not Found</h1>
}
500エラーページ
404ページ同様に、
error.tsxを/appに作成することでオリジナルの500ページを作成できます。
error.tsx
"use client"
const ErrorPage = () => {
return <h1>500 - Page Not Found</h1>
}
これで自作のエラーページが表示できるようになりました。
エラーページをカスタマイズする
自作のエラーページを魅力的に表示できるようにカスタマイズしてみます
どのエラーページを表示しているか一目で分かるImageを作成します
not-found.tsx
import Image from 'next/image'
export default function NotFound() {
return(
<Image
src="/404.png"
alt='404'
width={800}
height={400}
priority
/>
)
}
エラーページからトップ画面に戻るLinkButtonを作成します
not-found.tsx
import LinkButton from '@/components/LinkButton'
export default function NotFound() {
return(
<LinkButton href="/">
トップに戻る
</LinkButton>
)
}
LinkButtonの中身
LinkButtonをコンポーネント化し、使いまわしできるようにします。
LinkButton.tsx
import { ComponentProps, FC, ReactNode } from "react"
import { Button } from "@/components/Button"
import Link from "next/link"
interface LinkButtonProps extends ComponentProps<typeof Button<typeof Link>> {
href: string
children: ReactNode
}
const LinkButton: FC<LinkButtonProps> = ({ href, children, ...props }: LinkButtonProps) => {
return (
<Button component={Link} href={href} {...props}>
{children}
</Button>
)
}
export default LinkButton
文字のサイズ、色を調整する
not-found.tsx
import PageTitle from '@/components/PageTitle'
export default function NotFound() {
return(
<PageTitle style={{ color: 'error' }}>
指定されたページが見つかりません
</PageTitle>
)
}
完成図
404エラーページ
最終的なコード
not-found.tsx
import LinkButton from '@/components/LinkButton'
import { PageTitle } from '@/components/PageTitle'
import Image from 'next/image'
export default function NotFound() {
return (
<div>
<center>
<Image
src="/404.png"
alt='404'
width={800}
height={400}
priority
/>
<PageTitle style={{ color: 'error' }}>
指定されたページが見つかりません
</PageTitle>
<LinkButton href="/">
トップに戻る
</LinkButton>
</center>
</div>
)
}
500エラーページ
最終的なコード
error.tsx
"use client"
import LinkButton from "@/components/LinkButton"
import { PageTitle } from "@/components/PageTitle"
import Image from 'next/image'
const ErrorPage = () => {
return (
<div>
<center>
<Image
src="/500.png"
alt='500'
width={800}
height={400}
priority
/>
<PageTitle style={{ color: 'error' }}>
指定されたページが表示できませんでした
</PageTitle>
<LinkButton href="/">
トップに戻る
</LinkButton>
</center>
</div>
)
}
export default ErrorPage
まとめ
- 独自のエラーページを用意しておくことで、
エラーページも含めたWebアプリケーション全体の外観を統一できる
Discussion