await setDoc not working in Next.js with Firestore: Server/Client code issue?

Nothing happens following await setDoc in Write.js am I missing something
I am using Nextjs 12. My configuration is all good, I think there is a problem with await in client vs server code which is causing issues

index.js

import { Inter } from 'next/font/google'
import { initFirebase} from "@/lib/firebase/initFirebase";
import WriteToCloudFirestore from "@/componenets/cloudFirestore/Write";

const inter = Inter({ subsets: ['latin'] })

export default function Home() {

  initFirebase()

  return (...)

initFirebase.js

import {  initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const clientCredentials = {
    apiKey: process.env.PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.PUBLIC_FIREBASE_PROJECT_ID,
}

function initFirebase() {
    if (typeof window !== undefined) {
        initializeApp(clientCredentials);
        console.log("Firebase has been initialized successfully");
    }
}

const app = initializeApp(clientCredentials);

const db = getFirestore(app);

export {initFirebase, db};

write.js

import { db } from '@/lib/firebase/initFirebase'
import {doc, setDoc} from "firebase/firestore";


const WriteToCloudFirestore =  () => {
    const sendData = async () => {
        try {
            const userDoc = doc(db, "myCollection", "myDoc")
            alert("starting")
            await setDoc(userDoc, {
                string_data: 'John Doe',
                number_data: 2,
                boolean_data: true,
                map_data: {stringInMap: 'Hi', numberInMap: 7},
                array_data: ['text', 4],
                null_data: null,
            })
            alert('Data was successfully sent to cloud firestore!')
        } catch (error) {
            console.log(error)
            alert(error)
        }
    }


    return (
        <div style={{margin: '5px 0'}}>
            <button onClick={sendData} style={{width: '100%'}}>Send Data To Cloud Firestore</button>
        </div>
    )
}

export default WriteToCloudFirestore

I tried running the setDoc in the initFirebase function and it worked so, there must be some sort of server/client issue.

I am expecting the firestore to be updated.

You have incomplete firebase configuration. You must include databaseURL to communicate with firestore. And while exposing environment Variables to the Browser, you should prefix NEXT before PUBLIC in `next.js.

Here is the sample code snippet:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// 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: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId:process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { db };

Reference: https://firebase.google.com/docs/web/setup/#add-sdks-initialize