Runtime environment variables
Does react refine allow for using environment variables after the build script has been ran
NEXT_PUBLIC_ prefix to a variable defined in env.local. Next.js will automatically make it accessible for use in the browser and anywhere else in your application. For example:env.local we defined a NEXT_PUBLIC_GOOGLE_ANALYTICS_ID variable which holds the value for our Google analytics ID. The prefix NEXT_PUBLIC_ lets us use the variable process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID in client side code (/pages/_app.js). Note that _app.js runs on both the client and server.Note: you can ask me a follow up question by @ mentioning me again process.env references with their values at build time. This means that if you want to change the environment variables, you would need to rebuild your application.Note: you can ask me a follow up question by @ mentioning me again NEXT_PUBLIC_NEXT_PUBLIC_env.localenv.localNEXT_PUBLIC_GOOGLE_ANALYTICS_IDprocess.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID/pages/_app.jsNote: you can ask me a follow up question by @ mentioning me againNote: you can ask me a follow up question by @ mentioning me againprocess.env# env.local
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID='your_google_analytics_id_here' ...
return (
<>
<Script strategy="lazyOnload" src={`<https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}> />
<Script strategy="lazyOnload">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}', {
page_path: window.location.pathname,
});
`}
</Script>
...
</>
)