エラーページ を追加

このサイトは Github Pages でホストしている。存在しないページにアクセスしようとしたときには、 Github のエラーページ が表示されたりするのだが、どうやら公式サイトをあさっていると、この 404 エラーのページを変えられるらしい。

変更方法は 404.html か 404.md を公開しているリポジトリのルートに置くだけ。

Next.js で静的に HTML を生成させるときに、このファイルも出力するようにする。

pages に 404.js を追加

nextjs の issue に似たような物があったので参考にした。書いた内容は以下の通り。

import Error from 'next/error';

export default class extends React.Component {
  static async getInitialProps({ res }) {
    let data;
    if (!data && res) res.statusCode = 404;
    return { data };
  }

  render() {
    const { data } = this.props;
    if (!data) return <Error statusCode={404} />;
    return <div>data: {data}</div>;
  }
}

既に自分でエラーページを作っている場合は、 1 行目を ./_error に変える。

重要なのは、 render() で 404 エラーページを返しているところだ。

exportPathMap に追加

next.config.js で静的な HTML を出力するときに対象となるファイルを指定する exportPathMap に、この 404 ページを追加する。

return Object.assign(
  {},
  {
    '/': { page: '/' },
    '/404.html': { page: '/404' },
  },
  paths
);

ここの設定は Next.js のドキュメントを参考にした。

if it ends with an extension, it will be exported as the specified filename

と書いてある通り、拡張子をつけると、その名前の HTML ファイルが出力される。例を見たほうが早いと思うので下に。

• /404 -> /404/index.html
• /404.html -> /404.html

動作確認

Github Pages にデプロイ後、試しに存在しないページにアクセスすると、いつもの Github pages の　 404 ページではなく、自分のカスタムページが表示されていれば成功だ。

このサイトでは

maybe-redirect-to-404-page

にアクセスすると、

404.html

が表示されるはずだ。