Next.js env variable not loading

Question

My environment variables are not loading in next.js. No it is not a duplicate of Environment variables not working (Next.JS 9.4.4).

I have a .env.local at the root.

NEXT_PUBLIC_FIREBASE_API_KEY=<key>
NEXT_PUBLIC_FIREBASE_AUTHENTICATION_DOMAIN=<key>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<key>
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<key>
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<key>
NEXT_PUBLIC_FIREBASE_APP_ID=<key>
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=<key>

I am trying to load them in a firebase.tsx file also at root

import { getApp, getApps, initializeApp } from "firebase/app";
import { getAuth, signOut } from "firebase/auth";
import { getFirestore } from "firebase/firestore";


const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_REBASE_API_KEY , //need the empty string before the env file is loaded
  authDomain: process.env.NEXT_PUBLIC_REBASE_AUTHENTICATION_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_REBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_REBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_REBASE_MESSAGING_SENDER_ID ,
  appId: process.env.NEXT_PUBLIC_REBASE_APP_ID,
  measurementId:process.env.NEXT_PUBLIC_REBASE_MEASUREMENT_ID 
};

export const USER_EXIST = "user/exist" ;
export const USER_DUPLICATE = "user/duplicate" ;

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional


// // Initialize Firebase


export const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
export const db = getFirestore(app);

export async function logOut(){
  await signOut(getAuth())
  .catch((err) => alert(err));
}

I don't understand why it does not load. I do seem to follow the doc Environment variable next.js doc.

Can you help me out ?

Thank you