The initial task you need to accomplish on Hugo is how to add variables from .env to JavaScript when building the site using hugo server or hugo --gc --minify after deploying on Netlify.
And what I understand after researching for this:

• touch .env file and add variables with names that start with HUGO_PARAMS_ as required read

• Add to config.toml
  

[security]
  enableInlineShortcodes = false
  [security.funcs]
    getenv = ['^HUGO_']

• Add to Netlify Deploy Environment variables from .env

• Add to \layouts_default\baseof.html something like this
  

<script>
const apiKey = "{{ getenv "HUGO_PARAMS_FIREBASE_API_KEY" }}";
//console.log('apiKey', apiKey);
</script>

• Deploy that That's all, it will be a success.

To run it locally, you will need to write all the variables in the following format:

env HUGO_TITLE="Some Title" hugo server

(I couldn't find any other way, and it's terribly inconvenient)
read

Sources: 1 2 3 4