結果

ローカル環境(localhost:3000/)では、Firebaseに接続できているが、本番環境(Vercel)で接続できなかった。

Firebase設定ファイル

firebase.ts

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN!,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET!,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID!,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID!,
};

console.log("API KEY:", process.env.NEXT_PUBLIC_FIREBASE_API_KEY);

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const storage = getStorage(app);

.env.local

NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyDIamt8vy3rl0ZL0YE2-DO4unIoTw9y4b0
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=product-management-app-e8964.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=product-management-app-e8964
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=product-management-app-e8964.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=470572240008
NEXT_PUBLIC_FIREBASE_APP_ID=1:470572240008:web:fba6134ed7fb78620ce33d

Vercel設定

"https://vercel.com/tomomitsu-kerumas-projects/product-management-app/settings/environment-variables"