nextjs

Question

我有新的反应和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)
    }
}

Answer 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>
        );
    }
}