はじめに
Next.js を使用してアプリケーションの開発をしている。デプロイには今回はVercelを使用している。
初歩的なところで詰まったので、備忘として残しておく。
発生した問題
上記記事でCORSエラーを解消したところ、次は500エラーが発生した。
ただし、テスト用の/api/helloのエンドポイントは正常に動いていた。
②の原因
App routerのAPI内部では、外部APIを使用しており、環境変数を.envに定義していた。.envはコミット時に無視されるため、デプロイ先だと環境変数が存在せず、API接続が成功しない。
以前Github Actionsでも同様の事象があり、設定ページから環境変数を設定することで解決した。Vercelの場合も、設定からEnvironment Variableを定義できたため、.envと同様に環境変数を定義したところ、ようやくローカルと同様にAPIが動作した。
まとめ
かなり基本的な部分で詰まってしまい、まだまだだと感じた。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼