Unable to pull database from realtime database of Google in next js app-CodePudding

Currently I am not able to pull the database from Google Realtime Database and I am not sure what I am doing wrong. Below is the code that is in my Categories page.

import CategoryHeader from '../../components/CategoryHeader';
import database from '../../DataManagement/data/data.json';
import Product from './product';

import { app } from '../../firebase/firebase';

export default function Categories({ data }) {
    // console.log(data)

    const productData = database

    return ( 
        <section>
            <CategoryHeader header="All Products"/>
            <div className="catergory">
                <ul>
            {
                productData.map((data) => {
                    return <li key={data.id}><Product 
                         
                        productName={data.name} 
                        productDescription={data.description} 
                        productImage={data.image.desktop}/>
                        </li>
                })
            }
            </ul>
        </div>
        </section>
    )
}

export async function getStaticProps() {
    const res = await fetch('https://audiophile-a8abd-default-rtdb.firebaseio.com');
    const data = res.json();

    return {
        props: {
            data,
        }
    }
}

I have the basic setup from Firebase in a firebase configuration below.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// 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: "AIzaSyDrrHKenRbeiyfUO58v88TSJEdtWumWZjk",
  authDomain: "audiophile-a8abd.firebaseapp.com",
  databaseURL: "https://audiophile-a8abd-default-rtdb.firebaseio.com",
  projectId: "audiophile-a8abd",
  storageBucket: "audiophile-a8abd.appspot.com",
  messagingSenderId: "193961133135",
  appId: "1:193961133135:web:9c9e8731fc281a68eb563a",
  measurementId: "G-V2C17TC2ZN"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);

The error I continue to get is "SerializableError: Error serializing .data returned from getStaticProps in "/categories"."

Any ideas how to get the live data?

CodePudding user response：

This doesn't work:

const res = await fetch('https://audiophile-a8abd-default-rtdb.firebaseio.com');
const data = res.json();

If you open that URL in your browser, you have to sign in and then get taken to the Firebase console for the project. And fetch is not equipped to handle that, nor is it what you actually want.

If you want to get the JSON from your database, you're looking to use the Firebase REST API and you need to ensure the path of the URL ends with .json. So:

const res = await fetch('https://audiophile-a8abd-default-rtdb.firebaseio.com/.json');
const data = res.json();