Next.jsにおける環境変数の参照に関して

前提

Next.js×Firebaseでアプリを構築していますが、環境変数を使用するとfirestoreとの接続ができなくなって困っています。

＜構成＞
・src/fire/index.jsでfirebaseの初期化処理を実施。初期化されたdbをexportしている。
・src/hooks/useFirebase内で上記dbを使用し、getDataメソッドにfirestoreからデータを取ってくる処理を書いている。
・SampleComponentでuseEffect内でgetDataを呼び出し、firestoreのデータを取得している。

実現したいこと

.envファイルにfirebaseの初期化処理に使用するAPIキー等を書き、それを使用してfirestoreからデータを取得したい。

発生している問題・エラーメッセージ

APIキー等を直接書いている場合は問題なく接続できています。
ただし、環境変数として扱うと、接続に失敗しています。
process.envはgetStaticProps, getStaticPaths, getServerSidePropsの中でしか利用できず、クライアントではNEXT_PUBLICをつける必要があるとのことですが、つけても接続に失敗します。
このやり方ではクライアントで呼び出せていない（サーバー側で呼び出している？）のでしょうか？
あまりよく理解できていないため、教えていただけますと助かります。

https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

@firebase/firestore: Firestore (9.9.1): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied on resource project "プロジェクト名",.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

該当のソースコード

環境変数を使って書くとfirestoreとの接続に失敗します。

src/fire/index.ts
1const firebaseConfig = {
2  apiKey: process.env.NEXT_PUBLIC_API_KEY,
3　…
4  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID
5}
6
7const app = initializeApp(firebaseConfig);
8export const db = getFirestore(app);

環境変数を使わないと問題なくデータを取得できます。

src/fire/index.ts
1const firebaseConfig = {
2  apiKey: xxxxxxxxxxxxxxxxxxx,
3　…
4  measurementId: yyyyyyyyyyyyyyyy
5}
6
7const app = initializeApp(firebaseConfig);
8export const db = getFirestore(app);

src/hooks/useFirebase.ts
1import { db } from "../fire";
2
3const getData = () => {
4  〜dbを使用したfirestoreデータの取得処理〜
5}

SampleComponent.tsx
1const Sample = () => {
2
3  useEffect(() => { getData() },[])
4
5return(
6   〜データを表示〜
7)
8}

試したこと

・ファイル名の変更（.env, .env.local）
・console.log(process.env.NEXT_PUBLIC_API_KEY)で値が参照できているかの確認（useEffect内、useFirebase内、index.ts内いずれもOK）
・process.env_API_KEYでの実施（もちろんNG）