Indicate boolean value for configured experimental features on startup (vercel#74691)

When printing the configured experimental features of the Next.js config, we are currently not discriminating `true` from `false` values. This is especially confusing when disabling an experimental feature that is enabled by default. In this case it appears in the output as if the feature was enabled.

By using `✓` and `⨯` for boolean feature flags (and `·` for others), users can now clearly see whether a configured feature is enabled or disabled.

**Before:**

<img width="377" alt="before" src="https://github.com/user-attachments/assets/9cb75c1a-910d-48d2-ba1e-048213523e5f" />

**After:**

<img width="377" alt="after" src="https://github.com/user-attachments/assets/9975366d-b8fd-48ef-83e3-44fbad633f48" />

Author: unstubbable

packages/next/src/build/index.ts

@@ -904,12 +904,15 @@ export default async function build(
       )
 
       // Always log next version first then start rest jobs
-      const { envInfo, expFeatureInfo } = await getStartServerInfo(dir, false)
+      const { envInfo, experimentalFeatures } = await getStartServerInfo(
+        dir,
+        false
+      )
       logStartInfo({
         networkUrl: null,
         appUrl: null,
         envInfo,
-        expFeatureInfo,
+        experimentalFeatures,
       })
 
       const ignoreESLint = Boolean(config.eslint.ignoreDuringBuilds)

packages/next/src/server/config.ts

@@ -1268,29 +1268,40 @@ export default async function loadConfig(
   return completeConfig
 }
 
-export function getEnabledExperimentalFeatures(
+export type ConfiguredExperimentalFeature =
+  | { name: keyof ExperimentalConfig; type: 'boolean'; value: boolean }
+  | { name: keyof ExperimentalConfig; type: 'other' }
+
+export function getConfiguredExperimentalFeatures(
   userNextConfigExperimental: NextConfig['experimental']
 ) {
-  const enabledExperiments: (keyof ExperimentalConfig)[] = []
+  const configuredExperimentalFeatures: ConfiguredExperimentalFeature[] = []
 
-  if (!userNextConfigExperimental) return enabledExperiments
+  if (!userNextConfigExperimental) {
+    return configuredExperimentalFeatures
+  }
 
   // defaultConfig.experimental is predefined and will never be undefined
   // This is only a type guard for the typescript
   if (defaultConfig.experimental) {
-    for (const featureName of Object.keys(
+    for (const name of Object.keys(
       userNextConfigExperimental
     ) as (keyof ExperimentalConfig)[]) {
+      const value = userNextConfigExperimental[name]
+
       if (
-        featureName in defaultConfig.experimental &&
-        userNextConfigExperimental[featureName] !==
-          defaultConfig.experimental[featureName]
+        name in defaultConfig.experimental &&
+        value !== defaultConfig.experimental[name]
       ) {
-        enabledExperiments.push(featureName)
+        configuredExperimentalFeatures.push(
+          typeof value === 'boolean'
+            ? { name, type: 'boolean', value }
+            : { name, type: 'other' }
+        )
       }
     }
   }
-  return enabledExperiments
+  return configuredExperimentalFeatures
 }
 
 class CanaryOnlyError extends Error {

packages/next/src/server/lib/app-info-log.ts

@@ -5,19 +5,22 @@ import {
   PHASE_DEVELOPMENT_SERVER,
   PHASE_PRODUCTION_BUILD,
 } from '../../shared/lib/constants'
-import loadConfig, { getEnabledExperimentalFeatures } from '../config'
+import loadConfig, {
+  getConfiguredExperimentalFeatures,
+  type ConfiguredExperimentalFeature,
+} from '../config'
 
 export function logStartInfo({
   networkUrl,
   appUrl,
   envInfo,
-  expFeatureInfo,
+  experimentalFeatures,
   maxExperimentalFeatures = Infinity,
 }: {
   networkUrl: string | null
   appUrl: string | null
   envInfo?: string[]
-  expFeatureInfo?: string[]
+  experimentalFeatures?: ConfiguredExperimentalFeature[]
   maxExperimentalFeatures?: number
 }) {
   Log.bootstrap(
@@ -33,14 +36,21 @@ export function logStartInfo({
   }
   if (envInfo?.length) Log.bootstrap(`- Environments: ${envInfo.join(', ')}`)
 
-  if (expFeatureInfo?.length) {
+  if (experimentalFeatures?.length) {
     Log.bootstrap(`- Experiments (use with caution):`)
     // only show a maximum number of flags
-    for (const exp of expFeatureInfo.slice(0, maxExperimentalFeatures)) {
-      Log.bootstrap(`  · ${exp}`)
+    for (const exp of experimentalFeatures.slice(0, maxExperimentalFeatures)) {
+      const symbol =
+        exp.type === 'boolean'
+          ? exp.value === true
+            ? bold('✓')
+            : bold('⨯')
+          : '·'
+
+      Log.bootstrap(`  ${symbol} ${exp.name}`)
     }
     /* indicate if there are more than the maximum shown no. flags */
-    if (expFeatureInfo.length > maxExperimentalFeatures) {
+    if (experimentalFeatures.length > maxExperimentalFeatures) {
       Log.bootstrap(`  · ...`)
     }
   }
@@ -54,19 +64,19 @@ export async function getStartServerInfo(
   dev: boolean
 ): Promise<{
   envInfo?: string[]
-  expFeatureInfo?: string[]
+  experimentalFeatures?: ConfiguredExperimentalFeature[]
 }> {
-  let expFeatureInfo: string[] = []
+  let experimentalFeatures: ConfiguredExperimentalFeature[] = []
   await loadConfig(
     dev ? PHASE_DEVELOPMENT_SERVER : PHASE_PRODUCTION_BUILD,
     dir,
     {
       onLoadUserConfig(userConfig) {
-        const userNextConfigExperimental = getEnabledExperimentalFeatures(
-          userConfig.experimental
-        )
-        expFeatureInfo = userNextConfigExperimental.sort(
-          (a, b) => a.length - b.length
+        const configuredExperimentalFeatures =
+          getConfiguredExperimentalFeatures(userConfig.experimental)
+
+        experimentalFeatures = configuredExperimentalFeatures.sort(
+          ({ name: a }, { name: b }) => a.length - b.length
         )
       },
     }
@@ -83,6 +93,6 @@ export async function getStartServerInfo(
 
   return {
     envInfo,
-    expFeatureInfo,
+    experimentalFeatures,
   }
 }

packages/next/src/server/lib/start-server.ts

@@ -34,6 +34,7 @@ import { isPostpone } from './router-utils/is-postpone'
 import { isIPv6 } from './is-ipv6'
 import { AsyncCallbackSet } from './async-callback-set'
 import type { NextServer } from '../next'
+import type { ConfiguredExperimentalFeature } from '../config'
 
 const debug = setupDebug('next:start-server')
 let startServerSpan: Span | undefined
@@ -270,17 +271,17 @@ export async function startServer(
 
       // Only load env and config in dev to for logging purposes
       let envInfo: string[] | undefined
-      let expFeatureInfo: string[] | undefined
+      let experimentalFeatures: ConfiguredExperimentalFeature[] | undefined
       if (isDev) {
         const startServerInfo = await getStartServerInfo(dir, isDev)
         envInfo = startServerInfo.envInfo
-        expFeatureInfo = startServerInfo.expFeatureInfo
+        experimentalFeatures = startServerInfo.experimentalFeatures
       }
       logStartInfo({
         networkUrl,
         appUrl,
         envInfo,
-        expFeatureInfo,
+        experimentalFeatures,
         maxExperimentalFeatures: 3,
       })
 

test/e2e/app-dir/ppr/ppr.test.ts

@@ -1,5 +1,6 @@
 import { nextTestSetup } from 'e2e-utils'
 import { retry, findAllTelemetryEvents } from 'next-test-utils'
+import stripAnsi from 'strip-ansi'
 
 describe('ppr', () => {
   const { next, isNextDev, isNextStart } = nextTestSetup({
@@ -12,7 +13,7 @@ describe('ppr', () => {
   it('should indicate the feature is experimental', async () => {
     await retry(() => {
       expect(next.cliOutput).toContain('Experiments (use with caution)')
-      expect(next.cliOutput).toContain('ppr')
+      expect(stripAnsi(next.cliOutput)).toContain('✓ ppr')
     })
   })
   if (isNextStart) {

test/e2e/react-compiler/react-compiler.test.ts

@@ -1,6 +1,7 @@
 import { nextTestSetup, FileRef } from 'e2e-utils'
 import { retry } from 'next-test-utils'
 import { join } from 'path'
+import stripAnsi from 'strip-ansi'
 
 describe.each(
   ['default', process.env.TURBOPACK ? undefined : 'babelrc'].filter(Boolean)
@@ -22,7 +23,7 @@ describe.each(
   it('should show an experimental warning', async () => {
     await retry(() => {
       expect(next.cliOutput).toContain('Experiments (use with caution)')
-      expect(next.cliOutput).toContain('reactCompiler')
+      expect(stripAnsi(next.cliOutput)).toContain('✓ reactCompiler')
     })
   })
 

test/integration/config-experimental-warning/test/index.test.js

@@ -84,7 +84,7 @@ describe('Config Experimental Warning', () => {
 
     const stdout = await collectStdoutFromDev(appDir)
     expect(stdout).toMatch(experimentalHeader)
-    expect(stdout).toMatch(' · workerThreads')
+    expect(stdout).toMatch(' ✓ workerThreads')
   })
 
   it('should show warning with config from function with experimental', async () => {
@@ -98,7 +98,7 @@ describe('Config Experimental Warning', () => {
 
     const stdout = await collectStdoutFromDev(appDir)
     expect(stdout).toMatch(experimentalHeader)
-    expect(stdout).toMatch(' · workerThreads')
+    expect(stdout).toMatch(' ✓ workerThreads')
   })
 
   it('should not show warning with default value', async () => {
@@ -112,7 +112,21 @@ describe('Config Experimental Warning', () => {
 
     const stdout = await collectStdoutFromDev(appDir)
     expect(stdout).not.toContain(experimentalHeader)
-    expect(stdout).not.toContain(' · workerThreads')
+    expect(stdout).not.toContain('workerThreads')
+  })
+
+  it('should show warning with a symbol indicating that a default `true` value is set to `false`', async () => {
+    configFile.write(`
+      module.exports = {
+        experimental: {
+          prerenderEarlyExit: false
+        }
+      }
+    `)
+
+    const stdout = await collectStdoutFromDev(appDir)
+    expect(stdout).toMatch(experimentalHeader)
+    expect(stdout).toMatch(' ⨯ prerenderEarlyExit')
   })
 
   it('should show warning with config from object with experimental and multiple keys', async () => {
@@ -127,8 +141,8 @@ describe('Config Experimental Warning', () => {
 
     const stdout = await collectStdoutFromDev(appDir)
     expect(stdout).toContain(experimentalHeader)
-    expect(stdout).toContain(' · workerThreads')
-    expect(stdout).toContain(' · scrollRestoration')
+    expect(stdout).toContain(' ✓ workerThreads')
+    expect(stdout).toContain(' ✓ scrollRestoration')
   })
   ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
     'production mode',
@@ -163,16 +177,18 @@ describe('Config Experimental Warning', () => {
             workerThreads: true,
             scrollRestoration: true,
             parallelServerCompiles: true,
+            prerenderEarlyExit: false,
             cpus: 2,
           }
         }
       `)
         const stdout = await collectStdoutFromBuild(appDir)
         expect(stdout).toMatch(experimentalHeader)
         expect(stdout).toMatch(' · cpus')
-        expect(stdout).toMatch(' · workerThreads')
-        expect(stdout).toMatch(' · scrollRestoration')
-        expect(stdout).toMatch(' · parallelServerCompiles')
+        expect(stdout).toMatch(' ✓ workerThreads')
+        expect(stdout).toMatch(' ✓ scrollRestoration')
+        expect(stdout).toMatch(' ⨯ prerenderEarlyExit')
+        expect(stdout).toMatch(' ✓ parallelServerCompiles')
       })
 
       it('should show unrecognized experimental features in warning but not in start log experiments section', async () => {