NextJS/Firebase – implementing firebase analytics throw error: Missing App configuration value

i am using Next JS 13 with default pages directory and i use database for my project. Everything works fine, until i started to implementing firebase analytics.

First it throwed that window is undefiend. I solved it by checking window. After that it worked so i wanted to test logEvent() function in my index.js page.

And it throw FirebaseError: Installations: Missing App configuration value: "projectId" (installations/missing-app-config-values).

I tried to use proccess.env.NEXT_PUBLIC but it didnt worked.

import { initializeApp} from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
import { getAnalytics } from 'firebase/analytics';


const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const storage = getStorage(app);
export const analytics = typeof window !== 'undefined' ? getAnalytics(app) : null;
export default app;

Index.js example

<Button
key={`${name}_${index}`}
href={url}
mouseEnter={() => selectedImg !== img && handleMouseEnter(img)}
customStyles={'py-5 bg-primary-blue/60'}
onClick={() => (analytics ? logEvent(analytics, name) : {})}
>  Test </Button>

Have someone similiar problem and solved it?