上一篇介紹了自動部署，這篇就來介紹我遇到的第二個坑：資料儲存以及瀏覽分析。
如果你根據官方文章或是生成式 AI 如 Gemini 等，你大概會得到這樣子的一份 code：
import { initializeApp, getApps, getApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAnalytics } from 'firebase/analytics';
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,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const db = getFirestore(app);
const analytics = getAnalytics(app);
export { app, db, analytics };
我遇到了以下兩個問題，分享給大家。
- Firestore 連不上
明明已經開好 db 了，但就是一直顯示連線錯誤，錯誤訊息也非常的難以 debug。不斷地顯示Error: 5 NOT_FOUND
最後，我參考了這篇的解答：github 討論區 內容提到：getFirestore() 裡需傳入第二個參數，為資料庫的名稱，將其傳入後便可正常連線。 - Analytics 一直無法使用
結果是：我需要在最外層的layout.tsx去引入 analytics。具體做法如下：
首先建立analytics.tsx'use client';
此處
import { useEffect } from 'react';
import { analytics } from '@/lib/firebase';
export function Analytics() {
if (analytics === null) {
console.warn('Firebase Analytics is not supported in this browser.');
}
useEffect(() => {}, []);
return null;
}if (analytics === null)不可省略，否則 Next.js 會聰明的因為你並未使用analytics而直接不 import 它，導致 analytics 無法成功設定，這是我卡最久的地方。
在src/app/layout.tsx中使用此 component，即可在 Analytics 的 Dashboard 上即時看到當前活躍人數等。import type { Metadata } from 'next';
import './globals.css';
import { cn } from '@/lib/utils';
import { Header } from '@/components/common/header';
import { Toaster } from '@/components/ui/toaster';
import { Analytics } from '@/components/common/analytics';
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body className={cn('min-h-screen bg-background font-body antialiased')}>
<Analytics />
<div className="relative flex min-h-screen flex-col">
<Header />
<main className="flex-1">{children}</main>
</div>
<Toaster />
</body>
</html>
);
}
