Compiler: Support boolean and number primtives in next.config defines (#92731)

Expand `config.compiler.define` to support number and boolean primitives
as well.

The support is already in Turbopack's rewrite engine, as well as
Webpack's DefinePlugin. We just need to modify the zod schema to
actually support passing numbers and bools.

Added an E2E test that should check all supported types.

Author: andrewimm

packages/next/src/build/define-env.ts

@@ -46,6 +46,7 @@ const DEFINE_ENV_EXPRESSION = Symbol('DEFINE_ENV_EXPRESSION')
 interface DefineEnv {
   [key: string]:
     | string
+    | number
     | string[]
     | boolean
     | { [DEFINE_ENV_EXPRESSION]: string }

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

@@ -509,8 +509,12 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
             useLightningcss: z.boolean().optional(),
           }),
         ]),
-        define: z.record(z.string(), z.string()).optional(),
-        defineServer: z.record(z.string(), z.string()).optional(),
+        define: z
+          .record(z.string(), z.union([z.string(), z.number(), z.boolean()]))
+          .optional(),
+        defineServer: z
+          .record(z.string(), z.union([z.string(), z.number(), z.boolean()]))
+          .optional(),
         runAfterProductionCompile: z
           .function()
           .returns(z.promise(z.void()))

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

@@ -1453,13 +1453,13 @@ export interface NextConfig {
      * Replaces variables in your code during compile time. Each key will be
      * replaced with the respective values.
      */
-    define?: Record<string, string>
+    define?: Record<string, string | number | boolean>
 
     /**
      * Replaces server-only (Node.js and Edge) variables in your code during compile time.
      * Each key will be replaced with the respective values.
      */
-    defineServer?: Record<string, string>
+    defineServer?: Record<string, string | number | boolean>
 
     /**
      * A hook function that executes after production build compilation finishes,

test/e2e/define/app/client-component.js

@@ -16,3 +16,23 @@ export function ClientExpr() {
     </>
   )
 }
+
+export function ClientNumber() {
+  return (
+    <>
+      {typeof MY_NUMBER_VARIABLE === 'number'
+        ? String(MY_NUMBER_VARIABLE)
+        : 'not set'}
+    </>
+  )
+}
+
+export function ClientBoolean() {
+  return (
+    <>
+      {typeof MY_BOOLEAN_VARIABLE === 'boolean'
+        ? String(MY_BOOLEAN_VARIABLE)
+        : 'not set'}
+    </>
+  )
+}

test/e2e/define/app/page.js

@@ -1,5 +1,10 @@
 /* eslint-disable no-undef */
-import { ClientValue, ClientExpr } from './client-component'
+import {
+  ClientValue,
+  ClientExpr,
+  ClientNumber,
+  ClientBoolean,
+} from './client-component'
 
 export default function Page() {
   return (
@@ -20,6 +25,24 @@ export default function Page() {
       <li>
         Client expr: <ClientExpr />
       </li>
+      <li>
+        Server number:{' '}
+        {typeof MY_NUMBER_VARIABLE === 'number'
+          ? String(MY_NUMBER_VARIABLE)
+          : 'not set'}
+      </li>
+      <li>
+        Client number: <ClientNumber />
+      </li>
+      <li>
+        Server boolean:{' '}
+        {typeof MY_BOOLEAN_VARIABLE === 'boolean'
+          ? String(MY_BOOLEAN_VARIABLE)
+          : 'not set'}
+      </li>
+      <li>
+        Client boolean: <ClientBoolean />
+      </li>
     </ul>
   )
 }

test/e2e/define/define.test.ts

@@ -31,6 +31,16 @@ describe('compiler.define', () => {
       expect(loadedText).toContain('Server expr: barbaz')
       expect(loadedText).toContain('Client expr: barbaz')
     })
+
+    it('should render a number variable on server and client side', async () => {
+      expect(loadedText).toContain('Server number: 42')
+      expect(loadedText).toContain('Client number: 42')
+    })
+
+    it('should render a boolean variable on server and client side', async () => {
+      expect(loadedText).toContain('Server boolean: true')
+      expect(loadedText).toContain('Client boolean: true')
+    })
   })
 
   describe('compiler.defineServer', () => {

test/e2e/define/next.config.js

@@ -3,6 +3,8 @@ module.exports = {
     define: {
       MY_MAGIC_VARIABLE: 'foobar',
       'process.env.MY_MAGIC_EXPR': 'barbaz',
+      MY_NUMBER_VARIABLE: 42,
+      MY_BOOLEAN_VARIABLE: true,
     },
     defineServer: {
       MY_SERVER_VARIABLE: 'server',