Currently, I am in the process of testing an app that features a widget which relies on an API key within a script. This script needs to be placed within my <head> tags. My .js file is located in my public folder and is being imported into my layout.tsx like this:
<html lang="en">
<Script src="crm.js"/>
<body>
To handle the API key securely, I have created an .env.local file and stored my variable there:
NEXT_PUBLIC_META_CRM_API_KEY=xxxxxxxxxxx
Within my .js file, I have referenced the variable like so:
MetaCRMWidget.init({
apiKey: process.env.NEXT_PUBLIC_META_CRM_API_KEY
});
The issue I am facing is that the widget fails to load due to authorization problems when using the environment variable. However, manually entering the API key directly into the script allows it to work properly.
My current focus is on testing this setup locally.
Here are some images depicting the errors encountered when trying to use
process.env.NEXT_PUBLIC_META_CRM_API_KEY