Next.jsで404エラーページが表示されない

前提・実現したいこと

next.jsを使用し静的webサイト構築をしています。
存在しないページのパスを叩いたとき、404ページを表示したいです。

next.jsの公式サイトなど探してみましたが、
次のエラーが解消できず困っています。。
ご存知の方がいらっしゃいましたら教えて下さいm(_ _)m

発生している問題・エラーメッセージ

exportで生成された**out/**配下のファイルをサーバーにアップロードし確認しています。
現在では、存在しないページのパスを叩いたとき、
404エラーページが表示されず、500エラーが表示されます。

該当のソースコード

404ページは以下のパスに配置しています。
pages/404.tsx

js
1export default function Page404() {
2  return (
3    <div>
4      <Head>
5        <title>404</title>
6      </Head>
7
8      <div>404</div>
9    </div>
10  );
11}

試したこと

next.config.jsにexportPathMap設定を追加してみましたが、
変わりませんでした。。

js
1const path = require('path');
2
3module.exports = {
4  exportPathMap: async function () {
5    return {
6      '/': { page: '/' },
7      '/faq': { page: '/faq' },
8    };
9  },
10  exportTrailingSlash: true
11};