Module parse failed: The top-level-await experiment is not enabled in Next.js with Firebase

Question

I'm new to Next.js and Firebase

I'm trying to query data from firestore in my Next.js project using node v16.15.0 and next@13.2.1.

I'm following this documentation : https://firebase.google.com/docs/firestore/query-data/get-data?hl=en#get_all_documents_in_a_collection

But when i'm trying to query data, i have this error :

Error image

And this is my next.config.js file :

 /**
 * @type {import('next').NextConfig}
 */
 const nextConfig = {
   reactStrictMode: true,
   images: {
     domains: ['lh3.googleusercontent.com']
 },
 experiments: {
   topLevelAwait: true
 }
}

module.exports = nextConfig

So I tried to query data following the docs, and this is my code :

import { app } from "../firebaseConfig";
import {
  getFirestore,
  doc,
  getDocs,
  collection,
} from "firebase/firestore/lite";

const querySnapshot = await getDocs(collection(db, "cities"));
querySnapshot.forEach((doc) => {
  console.log(doc.id, " => ", doc.data());
});

const ProfilePage = (cours) => {
  const auth = getAuth(app);
  const user = auth.currentUser;
  if (user !== null) {
    const displayName = user.displayName;
    const email = user.email;
    const photoURL = user.photoURL;
    const emailVerified = user.emailVerified;
    const uid = user.uid;
  }

  const { currentUser } = useAuth();

  if (!currentUser) {
    router.push("/loginPage");
  }

  return (
    // my code
  );
};

export default ProfilePage;

And when i run it on localhost i have the error : error - ./pages/profilePage.js Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it) Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)

So how can I get rid of this error ? Where should I put the await? Thanks !