Next.jsのトレイリングスラッシュ設定により404ページをNetlifyで表示できない場合の対処方法(Typescript)

Next.jsのバージョン

執筆時点(2021/9/25)でのバージョン11.1.2の最新を使っています。

トレイリングスラッシュ設定とUrlの関係について

next.config.jsに下記のように記載がある場合はトレイリングスラッシュが設定されています。

next.config.js

module.exports = {
  trailingSlash: true,
}

この設定をしていると/posts/hello.html -> /posts/hello/index.htmlでアクセスできるようになります。
404ページも例外ではなく/404/index.htmlでアクセスしに行きます。

Netlifyの404ページ表示のルール

Netlifyでは/404.htmlルート直下に404ページが存在するとそこへアクセスしに行くようになります。

解決方法

404.tsxの作成

作成場所は/pages/404.tsxのように/pagesの直下に置いてください。
Tailwind CSSをスタイリングに利用しています。
下記のコードは一例です。

/pages/404.tsx

import React from 'react';

import { NextPage } from 'next';
import Link from 'next/link';

const Custom404Page: NextPage = () => {
  return (
    <>
      <div className="container m-auto">
        <h1 className="font-bold">404 - Page Not Found</h1>
        <div className="w-1/4 h-1/4">
          <img src="/images_file_path/404.svg" alt="404error" />
        </div>
        <Link href="/">
          <a>Go back home</a>
        </Link>
      </div>
    </>
  );
};

export default Custom404Page;

netlify.tomlに追加

リダイレクトで/404/index.htmlへアクセスしに行くように設定します。

netlify.toml

[[redirects]]
  from = "/*"
  to = "/404/index.html"
  status = 404

以上