開発環境では問題が無く、ビルド時にエラーも出ないが、デプロイ(本環境)でのデータフェッチが失敗する

カテゴリー
前置き
- WordPressをヘッドレスCMSとしてNext.jsでブログサイトを作った
- WordPressのホスト先はXserverを使用
- Next.jsアプリでローカルビルドは問題なく通る
- XserverにホストしているWordPressのREST APIを使用してVercelにホストしたNext.jsのビルドが失敗する
解決したいこと
Vercel上でnpm run build
が実行された時にデータフェッチが失敗するという事象です。
Next.js(App router)でヘッドレスCMS(WordPress)のサイトを制作しています。 デプロイ先はVercelです。
開発環境(ローカル実行では)では問題なくデータフェッチできてコンテンツが表示されており、ビルド時にエラーも発生しません。 しかし「デプロイするとデータフェッチに失敗してコンテンツが表示されない」という状況になっています。
エラー内容
Vercelのログを確認すると、データフェッチしているAPIファイル(例:/app/posts)と、 そのAPIを呼び出すコンポーネントファイルでサーバーエラーが出ていました。
エラー解消方法
そこでxserverのサーバーパネルログイン後にWordPressセキュリティ設定
ページに遷移し、国外IPアクセス制限設定
タブのREST APIアクセス制限
をOFFにすることでデータフェッチできるようになりました。 どうやらXserverのデフォルトの設定では国外のIPアドレスからのリクエストを無効にしているようです。。