Next.js with Firebase Remote Config

Question

I was trying to integrate Google's Firebase Remote config into my Next.js app.

When following Firebase's docs, and just inserted the functions directly into my component's code block, like so:

const remoteConfig = getRemoteConfig(app);

I keep getting the following error when following their documentation:

FirebaseError: Remote Config: Undefined window object. This SDK only supports usage in a browser environment.

Answer 1

I understand that it happens since Nextjs is rendered server-side, so there's no window object yet, so here's my solution:

import {
  fetchAndActivate,
  getRemoteConfig,
  getString,
} from 'firebase/remote-config';


const Home: NextPage<Props> = (props) => { 

const [title, setTitle] = useState<string | null>('Is It True?');


useEffect(() => {
    if (typeof window !== 'undefined') {
      const remoteConfig = getRemoteConfig(app);
      remoteConfig.settings.minimumFetchIntervalMillis = 3600000;

      fetchAndActivate(remoteConfig)
        .then(() => {
          const titleData = getString(remoteConfig, 'trueOrFalse');
          setTitle(titleData);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  });

return <h1>{title}</h1>}

Basically, the important part is the if statement that checks if the window object exists, then it execute the Remote Config functions according to Firebase documents.

Also, it worked outside a useEffect, but I think that's probably a bad idea to leave it outside, maybe even it should have a dependency, can't think of one at the moment.