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

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

対応

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

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

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

404 ページ

Before

After

pages/404.tsx

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

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

export const getStaticProps: GetStaticProps = async () => {
  const statusCode = '404';
  const errorText = '404 - Page Not Found';

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

500 ページ

Before

After

pages/500.tsx

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

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

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

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

メモ

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

参考

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