前回に続き「忘れずに！」シリーズの第2弾Death 🤘
タイトルの通りになりますが、今回ハマったポイントについて書きたいと思います。
前回のブログで取り上げた環境変数の設定をふまえて説明したいと思います。
403 Forbiddenエラー
本番環境にデプロイ後、動作確認を行うと「Access Denied」とブラウザに表示され、403 Forbiddenエラーが返ってきました。
環境変数の設定ミスを疑い調べたところ、変数名の付け方に誤りが見つかりました。
以下、Vercel側で環境変数を設定し直しました。
前回のブログで取り上げた内容に従い修正を行い、「ヨシ！これで問題ないだろう」と思い、いざVercelを立ち上げ本番環境で確認しましたが、エラーが改善されません....😭
原因
Vercel側で設定する環境変数の値をデプロイ後に更新したことにより、正しい環境変数が本番環境に反映されていないのが原因でした。
Next.jsで扱っている環境変数は、デプロイする度に再設定が行われ本番環境に反映されるしくみです。環境変数を変更しただけでは、本番環境には反映されません。
そのため環境変数を更新した場合は、必ず再デプロイ（再ビルド）し、環境変数を本番環境へ反映させる必要があります。
Vercelに設定した環境変数を更新した時は再デプロイを忘れないように注意しましょう！
