Vercelにデプロイしたら、APIキーがundefinedになってしまう

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アプリで、スプレッドシートのデータが読み込まれるようになりますか？