there.

I am developing Next.js App.

The app is needed custom service worker. I've implemented a push notification using Firebase Cloud Messaging. But I don't want to manage the environment variables in git.

Now, I'm implementing the feature by this code.

public/firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.8.1/firebase-messaging.js');

firebase.initializeApp({
  apiKey: "api-key",
  authDomain: "auth-domain",
  projectId: "project-id",
  storageBucket: "storage-bucket",
  messagingSenderId: "messaging-sender-id",
  appId: "app-id",
  measurementId: "measurement-id",
});

firebase.messaging();

firebase.messaging().setBackgroundMessageHandler((payload) => console.log('payload', payload));

I would like to achieve this with like:

importScripts('https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.8.1/firebase-messaging.js');

firebase.initializeApp({
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
});

firebase.messaging();

firebase.messaging().setBackgroundMessageHandler((payload) => console.log('payload', payload));

However, this javascript file must be placed in a public directory, and process.env.* cannot be used in a public direcotory.

How can I make this happen?