Next.jsで本番環境でだけURL直打ちが無効化されてしまう

前提

バックエンドをKotlin(SpringBoot)、フロントエンドをTypeScript(Next.js)でRestAPIでデータをやり取りする形でWebサービスを作っています。
その際、ローカルと開発環境では起きなかった事が本番環境で発生しており、もし少しでもわかる方がいらっしゃればと思いスレッドを立てます。

バックエンド：Kotlin 1.7.10(SpringBoot 2.7.2)
フロントエンド：TypeScript 4.4.3(Next.js 11.1.2) → ほぼCSR
DB：PostgreSQL 11
サーバ
- バックエンド：ECS
- フロントエンド：S3, CloudFront

解決にむけて判明したい事

Next.jsでURL直打ちで画面を開かせない設定等があるのかどうか？
もし上記が無ければ、URL直打ちで対象の画面を開くためにはどうしたらよいか？

回答2件

yuta_22さんの仰る通り、index.htmlの処理をさせる必要があるのですが、こちらの記事によると以下の設定変更で実現できると思います。

ビルドコマンドを以下のように変更し、

diff:package.json
1 "scripts": {
2   "dev": "next dev",
3-   "build": "next build",
4+   "build": "next build && next export",
5   "start": "next start",
6   "lint": "next lint"
7 },

設定でtrailingSlashを有効化してはいかがでしょうか。

diff:next.config,js
1module.exports = {
2 reactStrictMode: true,
3+ trailingSlash: true,
4}

投稿2023/02/04 04:18

編集2023/02/04 04:34

temasaguru

総合スコア60

遭遇している事象は、Next.js固有のものというよりは、SPAが起因の事象になります。
Next.jsでnext exportすると、index.htmlが生成されます。S3にはこのindex.htmlを配置する形になります。この状態で例えば/hogeにアクセスしようとしても、そこにはファイルは存在しません。サーバーには、/にindex.htmlがに配置されているのみで、/hogeに対応するものは存在しないからです。

どうするかというと、任意のパスへのリクエストを/にリダイレクトさせるという考え方をします。S3は利用したことがないので調べた限りですが、エラードキュメントという機能を使えば実現できるようです。（/hogeに対応するドキュメントが存在しない場合に、index.htmlをエラードキュメントに指定しておくと、index.htmlを代わりに返してくれる、という類のものだと思います（間違ってたらすみませんmm））

調べる際は「SPA」という単語を含めると、記事が引っかかりやすいと思います。以下、ググって出てきたサイトです。
https://dev.classmethod.jp/articles/s3-cloudfront-spa-angular-403-access-denied/
https://blog.ojisan.io/s3-spa-deploy/

投稿2023/01/11 08:28