Firebase 9 + NextJS 12 - Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

I'm trying to create a simple Query to Firestore database in my NextJS application.

I have clientApp.ts which looks like this:

import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

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,
  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,
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
// const storage = getStorage();
// const analytics = getAnalytics(firebase);

export { firebaseApp, db };

And then I have some index.js file where I have single method:

    import { collection, query, where, getDocs, getDoc, onSnapshot, doc, limit } from 'firebase/firestore';
    import { db } from '../firebase/clientApp';

    export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
      try {
        const videoRef = collection(db, 'videos');
        const q = query(videoRef, limit(8));
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
          console.log(doc.id, ' => ', doc.data());
        });
        return { props: { x: [] } };
      } catch (err) {
        console.log(err);
        return { props: { x: [] } };
      }
    };

It will end up in catch block with error:

FirestoreError [FirebaseError]: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
    at collection (file:///C:/Develop/petrolhat-nextjs/node_modules/@firebase/firestore/dist/index.node.mjs:19949:19)
    at getServerSideProps (webpack-internal:///./pages/index.tsx:108:88)
    at Object.renderToHTML (C:\Develop\petrolhat-nextjs\node_modules\next\dist\server\render.js:479:26)
    at async doRender (C:\Develop\petrolhat-nextjs\node_modules\next\dist\server\next-server.js:1389:38)
    at async C:\Develop\petrolhat-nextjs\node_modules\next\dist\server\next-server.js:1484:28
    at async C:\Develop\petrolhat-nextjs\node_modules\next\dist\server\response-cache.js:63:36 {
  code: 'invalid-argument',
  toString: [Function (anonymous)]
}

If I console.log(db) right before it is used it return:

Firestore {
  _credentials: FirebaseCredentialsProvider {
    authProvider: Provider {
      name: 'auth-internal',
      container: [ComponentContainer],
      component: [Component],
      instances: Map(0) {},
      instancesDeferred: Map(0) {},
      instancesOptions: Map(0) {},
      onInitCallbacks: Map(0) {}
...

So it seems to me DB is set correctly. So I tried to google a lot and find a possible solution, I also check for these topics here in StackOverflow but nothing helped:

1. Firebase is expecting the first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
2. Firestore v9 Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
3. V 9 FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

So if anyone has any idea what I'm doing wrong it will be great!