Automatic static (build-time) or runtime environment variables injection for [Next.js](https://github.com/zeit/next.js).
npm install next-envAutomatic static (build-time) or runtime environment variables injection for Next.js.
The plugin doesn't handle loading of dotenv files. Use dotenv or dotenv-load.
``sh`
npm install --save next-env dotenv-load
or
`sh`
yarn add next-env dotenv-load
Your project can consume variables declared in your environment as if they were declared locally in your JS files.
By default any environment variables starting with NEXT_STATIC_ will be embedded in the js bundles on build time. NEXT_PUBLIC_
Variables starting with are injected on runtime (using Next.js publicRuntimeConfig internally).NEXT_SERVER_
On node-side (SSR) all environment variables are available by default, but it is a good idea to follow the naming convention .
This module exposes a function that allows to configure the plugin.
In your next.config.js:
`js
const nextEnv = require('next-env');
const dotenvLoad = require('dotenv-load');
dotenvLoad();
const withNextEnv = nextEnv();
module.exports = withNextEnv({
// Your Next.js config.
});
`
In your .env:
``
NEXT_SERVER_TEST_1=ONLY_ON_SSR
NEXT_PUBLIC_TEST_1=INJECTED_BY_SSR
NEXT_STATIC_TEST_1=STATIC_TEXT
In your pages/index.js:
`js`
export default () => (
)
In the above example the output of process.env.NEXT_SERVER_TEST_1 should only be visible until client-side rendering kicks in.
In your next.config.js:
`js
const nextEnv = require('next-env');
const dotenvLoad = require('dotenv-load');
dotenvLoad();
const withNextEnv = nextEnv({
staticPrefix: 'CUSTOM_STATIC_',
publicPrefix: 'CUSTOM_PUBLIC_',
});
module.exports = withNextEnv({
// Your Next.js config.
});
`
In your .env:
``
CUSTOM_SERVER_TEST_1=ONLY_ON_SSR
CUSTOM_PUBLIC_TEST_1=INJECTED_BY_SSR
CUSTOM_STATIC_TEST_1=STATIC_TEXT
In your next.config.js:
`js
const withPlugins = require('next-compose-plugins');
const nextEnv = require('next-env');
const dotenvLoad = require('dotenv-load');
dotenvLoad();
const nextConfig = {
// Your Next.js config.
};
module.exports = withPlugins([
nextEnv({
staticPrefix: 'CUSTOM_STATIC_',
publicPrefix: 'CUSTOM_PUBLIC_',
}),
// another plugin with a configuration
[typescript, {
typescriptLoaderOptions: {
transpileOnly: false,
},
}],
], nextConfig);
``