t11hi

hene.dev

Next.js の 404/500 ページを変更

Next.js の 404/500 ページを変更

404/500 ページ がデフォルトのままだったので、変更しました。

対応

pages/404.tsx, pages/500.tsx を作成することで、404/500 ページを変更できます。

pages/404.js ファイルを作成することで、カスタマイズされた 404 ページを作ることができます。このファイルはビルド時に静的に生成されます。

Advanced Features: エラーページのカスタマイズ | Next.js

404 ページ

Before

Before 404

After

After 404

pages/404.tsx

import HeadComponent from "@/components/head";
import LayoutComponent from "@/components/layout";
import { getOgImage } from "@/lib/ogImage";
import utilStyles from "@/styles/utils.module.scss";
import { GetStaticProps } from "next";

export default function Custom404({
  statusCode,
  errorText,
  ogImage,
}: {
  statusCode: string;
  errorText: string;
  ogImage: string;
}) {
  return (
    <LayoutComponent>
      <HeadComponent
        title={errorText}
        description={errorText}
        keyword={statusCode}
        ogImage={ogImage}
      />
      <article>
        <h1 className={utilStyles.headingXl}>{errorText}</h1>
      </article>
    </LayoutComponent>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const statusCode = "404";
  const errorText = "404 - Page Not Found";
  const ogImage = await getOgImage(errorText);

  return {
    props: {
      statusCode,
      errorText,
      ogImage,
    },
  };
};

500 ページ

Before

Before 500

After

After 500

pages/500.tsx

import HeadComponent from "@/components/head";
import LayoutComponent from "@/components/layout";
import { getOgImage } from "@/lib/ogImage";
import utilStyles from "@/styles/utils.module.scss";
import { GetStaticProps } from "next";

export default function Custom500({
  statusCode,
  errorText,
  ogImage,
}: {
  statusCode: string;
  errorText: string;
  ogImage: string;
}) {
  return (
    <LayoutComponent>
      <HeadComponent
        title={errorText}
        description={errorText}
        keyword={statusCode}
        ogImage={ogImage}
      />
      <article>
        <h1 className={utilStyles.headingXl}>{errorText}</h1>
      </article>
    </LayoutComponent>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const statusCode = "500";
  const errorText = "500 - Server-side error occurred";
  const ogImage = await getOgImage(errorText);

  return {
    props: {
      statusCode,
      errorText,
      ogImage,
    },
  };
};

メモ

Custom404, Custom500 の名前は変更しても問題なく動きます。

参考