feat(next): next.config.ts

packages/next/src/build/transpile-config.ts

@@ -0,0 +1,116 @@
+import type { Options as SWCOptions } from '@swc/core'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import { readFile, unlink, writeFile } from 'fs/promises'
+import { transform, transformSync } from './swc'
+
+const oldJSHook = require.extensions['.js']
+const extensions = ['.ts', '.cts', '.mts', '.cjs', '.mjs']
+
+function registerHook(swcOptions: SWCOptions, shouldHandleESM: boolean) {
+  if (shouldHandleESM) {
+    require.extensions['.js'] = function (mod: any, oldFilename) {
+      try {
+        oldJSHook(mod, oldFilename)
+      } catch (error) {
+        if ((error as NodeJS.ErrnoException).code !== 'ERR_REQUIRE_ESM') {
+          throw error
+        }
+
+        // calling oldJSHook throws ERR_REQUIRE_ESM, so run _compile manually
+        // TODO: investigate if we can remove readFileSync
+        const content = readFileSync(oldFilename, 'utf8')
+        const { code } = transformSync(content, swcOptions)
+        mod._compile(code, oldFilename)
+      }
+    }
+  }
+
+  for (const ext of extensions) {
+    const oldHook = require.extensions[ext] ?? oldJSHook
+    require.extensions[ext] = function (mod: any, oldFilename) {
+      const _compile = mod._compile
+
+      mod._compile = function (code: string, filename: string) {
+        const swc = transformSync(code, swcOptions)
+        return _compile.call(this, swc.code, filename)
+      }
+
+      return oldHook(mod, oldFilename)
+    }
+  }
+}
+
+function resolveSWCOptions(cwd: string, tsConfig: any): SWCOptions {
+  const resolvedBaseUrl = join(cwd, tsConfig.compilerOptions?.baseUrl ?? '.')
+  return {
+    jsc: {
+      target: 'es5',
+      parser: {
+        syntax: 'typescript',
+      },
+      paths: tsConfig.compilerOptions?.paths,
+      baseUrl: resolvedBaseUrl,
+    },
+    module: {
+      type: 'commonjs',
+    },
+    isModule: 'unknown',
+  } satisfies SWCOptions
+}
+
+async function isESMProject(cwd: string) {
+  // TODO: reduce cost
+  let pkgJson: any
+  try {
+    pkgJson = JSON.parse(await readFile(join(cwd, 'package.json'), 'utf8'))
+  } catch {
+    pkgJson = {}
+  }
+  return pkgJson.type === 'module'
+}
+
+export async function transpileConfig({
+  nextConfigPath,
+  cwd,
+}: {
+  nextConfigPath: string
+  cwd: string
+}) {
+  const shouldHandleESM =
+    nextConfigPath.endsWith('.mts') || (await isESMProject(cwd))
+  // We are going to convert nextConfig as CJS format to use require hook
+  const tempConfigPath = join(
+    cwd,
+    `next.config.${shouldHandleESM ? 'cjs' : 'js'}`
+  )
+
+  // TODO: reduce cost
+  let tsConfig: any
+  try {
+    tsConfig = JSON.parse(await readFile(join(cwd, 'tsconfig.json'), 'utf8'))
+  } catch {
+    tsConfig = {}
+  }
+
+  const swcOptions = resolveSWCOptions(cwd, tsConfig)
+  registerHook(swcOptions, shouldHandleESM)
+
+  try {
+    const nextConfigStr = await readFile(nextConfigPath, 'utf8')
+    const { code } = await transform(nextConfigStr, swcOptions)
+
+    // TODO: reduce cost of writing on disk, e.g. import(data:text/javascript,...)
+    await writeFile(tempConfigPath, code, 'utf8')
+    return await import(tempConfigPath)
+  } catch (error: any) {
+    if (error.code === 'ERR_REQUIRE_ESM') {
+      error.code = 'NEXT_CONFIG_TS_ESM'
+    }
+    throw error
+  } finally {
+    await unlink(tempConfigPath).catch(() => {})
+    require.extensions['.js'] = oldJSHook
+    extensions.forEach((ext) => delete require.extensions[ext])
+  }
+}

packages/next/src/server/config.ts

@@ -25,6 +25,7 @@ import { matchRemotePattern } from '../shared/lib/match-remote-pattern'
 import { ZodParsedType, util as ZodUtil } from 'next/dist/compiled/zod'
 import type { ZodError, ZodIssue } from 'next/dist/compiled/zod'
 import { hasNextSupport } from '../telemetry/ci-info'
+import { transpileConfig } from '../build/transpile-config'
 
 export { normalizeConfig } from './config-shared'
 export type { DomainLocale, NextConfig } from './config-shared'
@@ -969,8 +970,9 @@ export default async function loadConfig(
   // If config file was found
   if (path?.length) {
     configFileName = basename(path)
-    let userConfigModule: any
+    const isTypeScript = configFileName.endsWith('ts') // .ts, .mts
 
+    let userConfigModule: any
     try {
       const envBefore = Object.assign({}, process.env)
 
@@ -982,6 +984,14 @@ export default async function loadConfig(
         // jest relies on so we fall back to require for this case
         // https://github.com/nodejs/node/issues/35889
         userConfigModule = require(path)
+      } else if (isTypeScript) {
+        userConfigModule = await transpileConfig({
+          nextConfigPath: path,
+          cwd: dir,
+        })
+        curLog.warn(
+          `Configuration with ${configFileName} is currently an experimental feature, use with caution.`
+        )
       } else {
         userConfigModule = await import(pathToFileURL(path).href)
       }
@@ -998,14 +1008,23 @@ export default async function loadConfig(
         return userConfigModule
       }
     } catch (err) {
+      // TODO: Modify docs to add cases of failing next.config.ts transformation
       curLog.error(
         `Failed to load ${configFileName}, see more info here https://nextjs.org/docs/messages/next-config-error`
       )
+      if ((err as NodeJS.ErrnoException).code === 'NEXT_CONFIG_TS_ESM') {
+        curLog.error(`Please use next.config.mts for Native ES Modules.`)
+      }
       throw err
     }
+
     const userConfig = await normalizeConfig(
       phase,
-      userConfigModule.default || userConfigModule
+      // SWC transform wraps the module in a default export when-
+      // `module.importInterop: 'none'` or `module.noInterop: true` is not set.
+      userConfigModule.default?.default ??
+        userConfigModule.default ??
+        userConfigModule
     )
 
     if (!process.env.NEXT_MINIMAL) {
@@ -1105,20 +1124,19 @@ export default async function loadConfig(
     return completeConfig
   } else {
     const configBaseName = basename(CONFIG_FILES[0], extname(CONFIG_FILES[0]))
-    const nonJsPath = findUp.sync(
+    const unsupportedConfig = findUp.sync(
       [
         `${configBaseName}.jsx`,
-        `${configBaseName}.ts`,
         `${configBaseName}.tsx`,
         `${configBaseName}.json`,
       ],
       { cwd: dir }
     )
-    if (nonJsPath?.length) {
+    if (unsupportedConfig?.length) {
       throw new Error(
         `Configuring Next.js via '${basename(
-          nonJsPath
-        )}' is not supported. Please replace the file with 'next.config.js' or 'next.config.mjs'.`
+          unsupportedConfig
+        )}' is not supported. The allowed file extensions are: '.js', '.mjs', '.ts', and '.mts'.`
       )
     }
   }

packages/next/src/shared/lib/constants.ts

@@ -61,7 +61,12 @@ export const DEV_MIDDLEWARE_MANIFEST = '_devMiddlewareManifest.json'
 export const REACT_LOADABLE_MANIFEST = 'react-loadable-manifest.json'
 export const AUTOMATIC_FONT_OPTIMIZATION_MANIFEST = 'font-manifest.json'
 export const SERVER_DIRECTORY = 'server'
-export const CONFIG_FILES = ['next.config.js', 'next.config.mjs']
+export const CONFIG_FILES = [
+  'next.config.js',
+  'next.config.mjs',
+  'next.config.ts',
+  'next.config.mts',
+]
 export const BUILD_ID_FILE = 'BUILD_ID'
 export const BLOCKED_PAGES = ['/_document', '/_app', '/_error']
 export const CLIENT_PUBLIC_FILES_PATH = 'public'

test/e2e/app-dir/next-config-ts/config-as-async-function/app/layout.tsx

@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/next-config-ts/config-as-async-function/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>{process.env.foo}</p>
+}

test/e2e/app-dir/next-config-ts/config-as-async-function/index.test.ts

@@ -0,0 +1,12 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('next-config-ts-config-as-async-function', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should support config as async function', async () => {
+    const $ = await next.render$('/')
+    expect($('p').text()).toBe('foo')
+  })
+})

test/e2e/app-dir/next-config-ts/config-as-async-function/next.config.ts

@@ -0,0 +1,13 @@
+import type { NextConfig } from 'next'
+
+const nextConfigAsyncFunction = async (phase, { defaultConfig }) => {
+  const nextConfig: NextConfig = {
+    ...defaultConfig,
+    env: {
+      foo: phase ? 'foo' : 'bar',
+    },
+  }
+  return nextConfig
+}
+
+export default nextConfigAsyncFunction

test/e2e/app-dir/next-config-ts/export-as-default/app/layout.tsx

@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/next-config-ts/export-as-default/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>{process.env.foo}</p>
+}

test/e2e/app-dir/next-config-ts/export-as-default/index.test.ts

@@ -0,0 +1,12 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('next-config-ts-export-as-default', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should support export { x as default }', async () => {
+    const $ = await next.render$('/')
+    expect($('p').text()).toBe('foo')
+  })
+})

test/e2e/app-dir/next-config-ts/export-as-default/next.config.ts

@@ -0,0 +1,9 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  env: {
+    foo: 'foo',
+  },
+}
+
+export { nextConfig as default }

test/e2e/app-dir/next-config-ts/export-default/app/layout.tsx

@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/next-config-ts/export-default/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>{process.env.foo}</p>
+}

test/e2e/app-dir/next-config-ts/export-default/index.test.ts

@@ -0,0 +1,12 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('next-config-ts-export-default', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should support export default { ... }', async () => {
+    const $ = await next.render$('/')
+    expect($('p').text()).toBe('foo')
+  })
+})

test/e2e/app-dir/next-config-ts/export-default/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+export default {
+  env: {
+    foo: 'foo',
+  },
+} satisfies NextConfig

test/e2e/app-dir/next-config-ts/import-alias/.gitignore

@@ -0,0 +1 @@
+!tsconfig.json

test/e2e/app-dir/next-config-ts/import-alias/bar.ts

@@ -0,0 +1 @@
+export const bar = 'bar'

test/e2e/app-dir/next-config-ts/import-alias/index.test.ts

@@ -0,0 +1,12 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('next-config-ts-import-alias', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should support import alias', async () => {
+    const $ = await next.render$('/')
+    expect($('p').text()).toBe('foobar')
+  })
+})

test/e2e/app-dir/next-config-ts/import-alias/next.config.ts

@@ -0,0 +1,12 @@
+import type { NextConfig } from 'next'
+import { foo } from '@/foo'
+import { bar } from 'bar'
+
+const nextConfig: NextConfig = {
+  env: {
+    foo,
+    bar,
+  },
+}
+
+export default nextConfig

test/e2e/app-dir/next-config-ts/import-alias/src/app/layout.tsx

@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/next-config-ts/import-alias/src/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>{`${process.env.foo + process.env.bar}`}</p>
+}

test/e2e/app-dir/next-config-ts/import-alias/src/foo.ts

@@ -0,0 +1 @@
+export const foo = 'foo'

test/e2e/app-dir/next-config-ts/import-alias/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

test/e2e/app-dir/next-config-ts/import-from-node-modules/app/layout.tsx

@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/next-config-ts/import-from-node-modules/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>{process.env.foo}</p>
+}