Link Search Menu Expand Document

Config

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.

Defaults

  • 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.

Phases

  • 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 }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* development only config options here */
    }
  }

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

Cook

check if production

cdn

  • 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 ? 'https://cdn.mydomain.com' : '',
}