Could not connect Firebase with NextJs when run build

Question

Learning NextJS, I made a working project with Firebase.

But when I build it using "npm run build" I've got an error :

@firebase/firestore: Firestore (X.X.X): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.

This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
    
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error. FirebaseError: Failed to get document because the client is offline.

Everything is Working in Dev mode. Here is a part of my Code :

import { initializeApp } from "firebase/app"; 
import { getFirestore, collection, getDocs} from 'firebase/firestore'; 
import React from 'react';
import Component from '../component/Component ';

export default function Home({ToReturn}) {
  
   return(
       <div className="App">
         <Component />
       </div>
   )
}

export async function getStaticProps(){
  
    const firebaseConfig = {Keys : "Firebase Keys etC..."};
    const app = initializeApp(firebaseConfig, {
        experimentalForceLongPolling: true,
        useFetchStreams: false,
    });
    const db = getFirestore(app);

    const ToReturn = { CharacterData : {} }
  
    const CharacterList = await getDocs(collection(db, 'Characters'));

    CharacterList.docs.map((Character) =>{      
      return ToReturn["CharacterData"][Character.id] = Character.data();
    });
  
  return {
    props : {
      ToReturn
    },
    revalidate: 100,
  };
};

Do you know where this error is coming from ? Tried to add experimentalForceLongPolling = true, but not fixing it.

EDIT : Tried with a new application from scratch and only one collection from firebase. Ok in DEV, but same error when run build. Tried new things, edited Next Export config, but none of those solutions worked.

EDIT 2 : Tried with Firestore REST API and it's working, but not with NPM Firebase

Someone Special · Accepted Answer · 2022-10-14 13:08:07Z

0

getStaticProps and getServerSideProps are server side so you need to use firebase-admin.

const { initializeApp } = require('firebase-admin/app');

You should also use all the serverside methods to get your docs

https://firebase.google.com/docs/admin/setup

answered Oct 14, 2022 at 13:08

Someone Special

13.7k8 gold badges54 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Could not connect Firebase with NextJs when run build

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related