Ensure env is loaded before next config (#22879)

This ensures we load all env values before loading `next.config.js` since these values can be used in there. This also updates to ensure we're testing these values are available while loading `next.config.js` so we don't regress on this. 

Fixes: https://github.com/vercel/next.js/issues/22811

packages/next/next-server/server/config-utils.ts

+import { loadEnvConfig } from '@next/env'
 import Worker from 'jest-worker'
 import findUp from 'next/dist/compiled/find-up'
 import { init as initWebpack } from 'next/dist/compiled/webpack/webpack'
-import { CONFIG_FILE } from '../lib/constants'
+import { CONFIG_FILE, PHASE_DEVELOPMENT_SERVER } from '../lib/constants'
 import { NextConfig, normalizeConfig } from './config-shared'
+import * as Log from '../../build/output/log'
 
 let installed: boolean = false
 
@@ -23,6 +25,8 @@ export async function shouldLoadWithWebpack5(
   phase: string,
   dir: string
 ): Promise<boolean> {
+  await loadEnvConfig(dir, phase === PHASE_DEVELOPMENT_SERVER, Log)
+
   const path = await findUp(CONFIG_FILE, {
     cwd: dir,
   })

packages/next/next-server/server/config.ts

@@ -3,11 +3,12 @@ import findUp from 'next/dist/compiled/find-up'
 import { basename, extname } from 'path'
 import * as Log from '../../build/output/log'
 import { hasNextSupport } from '../../telemetry/ci-info'
-import { CONFIG_FILE } from '../lib/constants'
+import { CONFIG_FILE, PHASE_DEVELOPMENT_SERVER } from '../lib/constants'
 import { execOnce } from '../lib/utils'
 import { defaultConfig, normalizeConfig } from './config-shared'
 import { loadWebpackHook } from './config-utils'
 import { ImageConfig, imageConfigDefault, VALID_LOADERS } from './image-config'
+import { loadEnvConfig } from '@next/env'
 
 export { DomainLocales, NextConfig, normalizeConfig } from './config-shared'
 
@@ -394,6 +395,7 @@ export default async function loadConfig(
   dir: string,
   customConfig?: object | null
 ) {
+  await loadEnvConfig(dir, phase === PHASE_DEVELOPMENT_SERVER, Log)
   await loadWebpackHook(phase, dir)
 
   if (customConfig) {

test/integration/env-config/app/.env

@@ -13,4 +13,6 @@ ENV_FILE_EXPANDED=$ENV_FILE_KEY
 ENV_FILE_EXPANDED_CONCAT=hello-${ENV_FILE_KEY}
 ENV_FILE_EXPANDED_ESCAPED=\$ENV_FILE_KEY
 ENV_FILE_KEY_EXCLAMATION="hello!"
-ENV_FILE_PROCESS_ENV="env-file"
\ No newline at end of file
+ENV_FILE_PROCESS_ENV="env-file"
+ENV_KEY_IN_NEXT_CONFIG="hello from next.config.js"
+NEXT_PUBLIC_ENV_KEY_IN_NEXT_CONFIG="hello again from next.config.js"
\ No newline at end of file

test/integration/env-config/app/next.config.js

 module.exports = {
   // update me
+  env: {
+    nextConfigEnv: process.env.ENV_KEY_IN_NEXT_CONFIG,
+    nextConfigPublicEnv: process.env.NEXT_PUBLIC_ENV_KEY_IN_NEXT_CONFIG,
+  },
   async redirects() {
     return [
       {

test/integration/env-config/app/pages/api/all.js

@@ -23,7 +23,10 @@ const variables = [
   'ENV_FILE_KEY_EXCLAMATION',
 ]
 
-const items = {}
+const items = {
+  nextConfigEnv: process.env.nextConfigEnv,
+  nextConfigPublicEnv: process.env.nextConfigPublicEnv,
+}
 
 variables.forEach((variable) => {
   items[variable] = process.env[variable]

test/integration/env-config/app/pages/index.js

@@ -40,4 +40,10 @@ export async function getStaticProps() {
   }
 }
 
-export default ({ env }) => <p>{JSON.stringify(env)}</p>
+export default ({ env }) => (
+  <>
+    <p>{JSON.stringify(env)}</p>
+    <div id="nextConfigEnv">{process.env.nextConfigEnv}</div>
+    <div id="nextConfigPublicEnv">{process.env.nextConfigPublicEnv}</div>
+  </>
+)

test/integration/env-config/app/pages/some-ssg.js

@@ -40,4 +40,10 @@ export async function getStaticProps() {
   }
 }
 
-export default ({ env }) => <p>{JSON.stringify(env)}</p>
+export default ({ env }) => (
+  <>
+    <p>{JSON.stringify(env)}</p>
+    <div id="nextConfigEnv">{process.env.nextConfigEnv}</div>
+    <div id="nextConfigPublicEnv">{process.env.nextConfigPublicEnv}</div>
+  </>
+)

test/integration/env-config/app/pages/some-ssp.js

@@ -39,4 +39,10 @@ export async function getServerSideProps() {
   }
 }
 
-export default ({ env }) => <p>{JSON.stringify(env)}</p>
+export default ({ env }) => (
+  <>
+    <p>{JSON.stringify(env)}</p>
+    <div id="nextConfigEnv">{process.env.nextConfigEnv}</div>
+    <div id="nextConfigPublicEnv">{process.env.nextConfigPublicEnv}</div>
+  </>
+)

test/integration/env-config/test/index.test.js

@@ -22,7 +22,11 @@ const appDir = join(__dirname, '../app')
 
 const getEnvFromHtml = async (path) => {
   const html = await renderViaHTTP(appPort, path)
-  return JSON.parse(cheerio.load(html)('p').text())
+  const $ = cheerio.load(html)
+  const env = JSON.parse($('p').text())
+  env.nextConfigEnv = $('#nextConfigEnv').text()
+  env.nextConfigPublicEnv = $('#nextConfigPublicEnv').text()
+  return env
 }
 
 const runTests = (mode = 'dev') => {
@@ -53,6 +57,9 @@ const runTests = (mode = 'dev') => {
     expect(data.ENV_FILE_KEY_EXCLAMATION).toBe('hello!')
     expect(data.ENV_FILE_EMPTY_FIRST).toBe(isTestEnv ? '' : '$escaped')
     expect(data.ENV_FILE_PROCESS_ENV).toBe('env-cli')
+
+    expect(data.nextConfigEnv).toBe('hello from next.config.js')
+    expect(data.nextConfigPublicEnv).toBe('hello again from next.config.js')
   }
 
   it('should have process environment override .env', async () => {