nextjs 中的 Firebase 数据库参考答案

【问题标题】：Firebase db reference in nextjsnextjs 中的 Firebase 数据库参考
【发布时间】：2018-07-24 08:22:22
【问题描述】：

我是新来的 react 和 nextjs：

如何在页面上共享 firebase 参考？我是否需要像在索引页面上所做的那样在每个页面（我想使用它的位置）上声明引用以及配置等？

try {    
    firebase.initializeApp({
        apiKey: "############",
        authDomain: "###############",
        databaseURL: "#########",
        projectId: "############",
        storageBucket: "",
        messagingSenderId: "########"
    })

} catch (err) {    
    if (!/already exists/.test(err.message)) {
        console.error('Firebase initialization error', err.stack)
    }
}

【问题讨论】：

标签： javascript firebase nextjs

【解决方案1】：

我通常要么使用作为服务共享的已配置的 firebase 实例。

// services/firebase.js

import firebase from 'firebase';

var config = {
    apiKey: "############",
    authDomain: "###############",
    databaseURL: "#########",
    projectId: "############",
    storageBucket: "",
    messagingSenderId: "########"
};

if (!firebase.apps.length) {
    firebase.initializeApp(config);
}

export default firebase;

然后您可以导入此服务并在整个应用程序中使用它：

import React from 'react';
import PropTypes from 'prop-types';
import firebase from 'services/firebase';

export default class DynamicPage extends React.Component {
    static propTypes = {
        image: PropTypes.string
    };

    static async getInitialProps() {
        const props = {};
        const dbRef = firebase.database;
        // load some data and pass it to props
        return props;
    }

    render() {
        return (
            <div>
                // render the data
            </div>
        );
    }
}

【讨论】：