next-env
Next.js plugin to pass environment variables to Next.js' configuration.
By default, Next.js does not make available process.env
to the client side. The available solution for this problem is to set a config in next.config.js
to pass values which will be available in either server and client or just server.
The way to do it is by passing values to the publicRuntimeConfig
, serverRuntimeConfig
and env
properties of Next.js' config.
More info: https://nextjs.org/docs#build-time-configuration
This plugin does that automatically for all environment variables starting with a certain prefix.
Installation
$ npm i --save @moxy/next-env
Usage
// next.config.js
const withEnv = require('@moxy/next-env');
module.exports = withEnv({ ...options })({ ...nextConfig });
Multiple configurations can be combined together with function composition. For example:
// next.config.js
const withCSS = require('@zeit/next-css');
const withEnv = require('@moxy/next-env');
module.exports = withCSS(
withEnv({
removePrefixes: true,
})({
cssModules: true, // this options will be passed to withCSS plugin through nextConfig
}),
);
Application usage:
// next.config.js
const withEnv = require('@moxy/next-env');
module.exports = withEnv({ removePrefixes: true })({ ...nextConfig });
# environment variables definition
NEXT_PUBLIC_FOO="bar"
NEXT_SERVER_FOO="foo"
NEXT_BUILD_BAR="compile-me-please"
// app.js
const { publicRuntimeConfig } = getConfig():
const x = publicRuntimeConfig.FOO; // 'bar'
const y = 'compile-me-please' // original code was `const y = process.env.BAR;
// server.js
const { serverRuntimeConfig } = getConfig():
const x = serverRuntimeConfig.FOO; // 'foo'
Available options
Option | Description | Type | Default |
---|---|---|---|
publicPrefix | Prefix of variables to lookup and then pass to publicRuntimeConfig | String | NEXT_PUBLIC_ |
serverPrefix | Prefix of variables to lookup and then pass to serverRuntimeConfig | String | NEXT_SERVER_ |
buildPrefix | Prefix of variables to lookup and then pass to env to be injected in compile-time | String | NEXT_BUILD_ |
removePrefixes | Option to remove prefix when passing variables to config | Boolean | false |
Tests
Any parameter passed to the test
command, is passed down to Jest.
$ npm t
$ npm t -- --watch # during development
License
Released under the MIT License.