Setting Firebase Remote Config with NextJS App Router

Dynamically Display Banners Based on Firebase Remote Config

Firebase Remote Config is a service provided by Firebase that allows you to dynamically configure and customize your app’s behavior and appearance without requiring an app update. It provides a way to store configuration parameters in the cloud and fetch them into your app at runtime.

Prefer video version? check this: https://youtu.be/HCGDDBnmmO4

Preview Result Banner

Prerequisite

1. NextJS 15
2. Firebase

Installation

npm install firebase@latest

Create UI

• Create new client component called BlackSaleBanner and follow code below

"use client"

import { useState } from "react";

export function BlackSaleBanner() {
  const [show, setShow] = useState(false);

  if (!show) return null;

  return (
    <div className="mx-auto bg-white/10 p-4 px-10 w-fit mt-10">
      <p className="uppercase">Special Offer</p>
      <h1 className="text-4xl">Black Friday Sale</h1>
      <h3…