Next.jsアプリをNetlifyにデプロイしたとき、想定したURLでアクセスができなくて対応したときのメモ(動的パスでの扱い)
入力されたパスに応じて、クライアント側でデータを読み込むような処理が書かれたNext.jsアプリをNetlifyにデプロイした際、 実際の挙動が開発時(ローカル)と本番(Netlify)で異なっていたのを対応したので、備忘録として残しておく。
ここで扱っている内容自体は下記のポストを見て解決できた。
また、起きている問題がどういうものか？ということについても、下記のポストに書かれている内容と同じため、もし似たような問題で困っている方がいたら、下記を参照することをおすすめする。
以下、備忘録。
下記のようなURLでアクセスしたい。
http://example.com/123456
そのためNext.jsプロジェクトのファイル配置は下記のようになる。
Pages/[id].tsx
だが、本番上で上記URLにアクセスすると404になる。
下記ではアクセスできる。
([id]という文字列を入力する)
http://example.com/[id]
上記のようになる原因としては、deployコマンド後、下記の内容でアウトプットされているためかと思われる
out/[id].html
Netlifyの _redirects に下記の１行を加えてリリースすることで、意図したアクセスが可能となった。
/:id /[id] 200
