Link Search Menu Expand Document


Env vars

module.exports = {
  env: {
    customKey: 'my-value',

  • access
function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>

export default Page
  • details
    • Next.js will replace process.env.customKey with 'my-value' at build time
    • Trying to destructure process.env variables won't work due to the nature of webpack DefinePlugin.


  • Next.js allows you to set defaults in .env (all environments), .env.development (development environment), and .env.production (production environment).
  • .env.local always overrides the defaults set.
  • Note: .env, .env.development, and .env.production files should be included in your repository as they define defaults
  • .env*.local should be added to .gitignore, as those files are intended to be ignored.
  • .env.local is where secrets can be stored.


  • phase is the current context in which the configuration is loaded.
  • Phases can be imported from next/constants
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
    return {
      /* development only config options here */

  return {
    /* config options for all phases except development here */


check if production


  • source: cdn

  • automatically use your asset prefix for the JavaScript and CSS files it loads from the /_next/ path (.next/static/ folder).

  • Asset prefix support does not influence the following paths:

    • Files in the public folder;
    • /_next/data/ requests for getServerSideProps pages
    • /_next/data/ requests for getStaticProps pages. These requests will always be made against the main domain to support Incremental Static Generation, even if you're not using it (for consistency).
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // Use the CDN in production and localhost for development.
  assetPrefix: isProd ? '' : '',