Although the env() function can work with custom properties, it currently reads from UA-defined environment variables, not from the published NEXT_PUBLIC_ variables on the client-side or server-side environment variables. While there may be a possibility in the future to add custom environment variables via JS or CSS, creating client-side Custom CSS Environment Variables is not feasible at this moment.
Until such functionality becomes available, options include using CSS preprocessors, inline-styles in JSX, or PostCSS plugins, each with its own limitations.
Inline Styles
The primary drawback of inline styles is that they cannot be used in global.css as previously done. However, an advantage is the flexibility to create and update the style object dynamically during runtime. Please note that all NEXT_PUBLIC_ variables are immutable once the application starts running.
Example usage in index.js:
//Dynamic creation by iterating over keys in .env.local
const style = {"--primary": process.env.NEXT_PUBLIC_PRIMARY_COLOR ?? '#0096d0'}
<div style={style}>
<MyRoot></MyRoot>
</div>
CSS Preprocessors
One approach involves importing specific environment variables into SCSS variables using the SASS additional-data loader option.
To integrate SASS with Next.js, follow the documentation for Styling with SCSS:
npm install --save-dev sass
In the next.config.js file, prepend the SASS variables:
const nextConfig = {
sassOptions: {
additionalData: Object.keys(process.env).reduce((accumulator, currentValue) => {
if (currentValue.startsWith('NEXT_THEME_')) {
return `${accumulator}$${currentValue}: ${process.env[currentValue]};`
}
else {
return accumulator
}
}, ''),
includePaths: [path.join(__dirname, 'styles')],
}
}
Add the necessary environment variables in .env.local:
NEXT_THEME_PRIMARY_COLOR=red
NEXT_THEME_SECONDARY_COLOR='#fff'
Now you can utilize these variables in globals.scss as demonstrated below:
@layer base {
:root {
--primary: #{$NEXT_THEME_PRIMARY_COLOR};
}
}
The downside is that SCSS variables are preprocessed and cannot be updated during JS runtime. Additionally, all referenced environment variables must be defined or handled explicitly using variable-exists() or !default.
PostCSS Plugins
Next.js comes with built-in support for PostCSS and various plugins, although none directly cater to your requirements. You may need to explore external plugins or create a custom solution to address your needs.
An example plugin like postcss-functions allows you to define a custom env function accessing environment variables.
In the postcss.config.js file:
const theme = Object.keys(process.env).reduce((accumulator, currentValue) => {
if (currentValue.startsWith('NEXT_THEME_')) {
accumulator[currentValue] = process.env[currentValue];
return accumulator;
}
else {
return accumulator
}
}, {})
function getEnv(variable, fallback = null) {
return theme[variable] ?? fallback;
}
module.exports = {
"plugins": {
"postcss-functions": {
"functions": {
getEnv
}
},
}
}
You can now utilize this custom function within global.css as shown below:
@layer base {
:root {
--primary: getEnv(NEXT_THEME_PRIMARY_COLOR, #0096d0);
}
}