Next.js x firebase : Error <Component auth has not been registered yet> を解決したい
解決したいこと
Next.js x firebase で起こっている以下のエラーを解消したい
Component auth has not been registered yet
発生している問題・エラー
Component auth has not been registered yet
該当するソースコード
firebase の初期化
// Import the functions you need from the SDKs you need
import { getApps, initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: 'xxxxx',
authDomain: 'xxxxx',
databaseURL: 'xxxxx',
projectId: 'xxxxx',
storageBucket: 'xxxxx',
messagingSenderId: 'xxxxx',
appId: 'xxxxx',
measurementId: 'xxxxx',
};
// Initialize Firebase
let app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
getAuth(app); //<- エラー発生箇所
export default app;
呼び出し側
'use client';
import { getAuth } from 'firebase/auth';
import app from "~/.firebase/client"
export const FirstPageTemplate = () => {
const auth = getAuth(app);
return (
<>
...
</>
)
};
環境
// package.json
"dependencies": {
"firebase": "^10.6.0",
"next": "14.0.2",
"react": "^18",
"react-dom": "^18",
},
質問
- 解決方法をご存知でしょうか
- そもそもこれは何を示しているエラーでしょうか？
過去に何度か firebase x Next.js は使ったことがありますが、appRouter では初めてでした.
SSR が関係しているのかもしれませんが、解決のとっかかりも見えずにいます。
0