Vercelにデプロイしたら、APIキーがundefinedになってしまう
Q&A
Closed
Google sheets APIを使って、スプレッドシートからデータを取得して、ブラウザ上に表示させるNext.jsのWebアプリを制作しています。
↑このデータをGoogle sheets APIを使って読み込んでいる。
localhost上でbuildした状態であれば、スプレッドシートのデータが問題なく読み込みできています。↓
しかし、Vercelで公開したところ、スプレッドシートのデータが読み込まれず、コンソールにhttps://sheets.googleapis.com/v4/spreadsheets/undefined/values/toeic?key=undefined 400 (Bad Request)と表示されます。↓
APIキーは.envファイルに記載しておりVercelのsetting > Environment Variablesにも記載しています。
デプロイしたサイトはこちら
https://toeic-five.vercel.app/
ソースコードはこちら
https://github.com/hiro2108/toeic/tree/main/src/app
こちらのファイル↓でAPIをフェッチしています。
https://github.com/hiro2108/toeic/blob/main/src/app/datas/api.jsx
どうすれば、Vercelで公開したWebアプリで、スプレッドシートのデータが読み込まれるようになりますか？
0
