vercel · devjiwonchoi · Oct 27, 2023 · Oct 27, 2023 · Oct 28, 2023 · Oct 28, 2023
@@ -9,7 +9,7 @@ import { hasNecessaryDependencies } from '../lib/has-necessary-dependencies'
 
 let TSCONFIG_WARNED = false
 
-function parseJsonFile(filePath: string) {
+export function parseJsonFile(filePath: string) {
   const JSON5 = require('next/dist/compiled/json5')
   const contents = readFileSync(filePath, 'utf8')
 

@@ -0,0 +1,53 @@
+import type { Options as SWCOptions } from '@swc/core'
+import Module from 'node:module'
+import { readFileSync } from 'node:fs'
+import { dirname } from 'node:path'
+import { transformSync } from '../swc'
+
+const oldJSHook = require.extensions['.js']
+const extensions = ['.ts', '.cts', '.mts', '.cjs', '.mjs']
+
+export function registerHook(swcOptions: SWCOptions) {
+  require.extensions['.js'] = function (mod: any, oldFilename) {
+    try {
+      return 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)
+    }
+  }
+}
+
+export function deregisterHook() {
+  require.extensions['.js'] = oldJSHook
+  extensions.forEach((ext) => delete require.extensions[ext])
+}
+
+export function requireFromString(code: string, filename: string) {
+  const paths = (Module as any)._nodeModulePaths(dirname(filename))
+  const m = new Module(filename, module.parent!) as any
+  m.paths = paths
+  m._compile(code, filename)
+  return m.exports
+}
@@ -0,0 +1,75 @@
+import type { CompilerOptions } from 'typescript'
+import type { Options as SWCOptions } from '@swc/core'
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { deregisterHook, registerHook, requireFromString } from './require-hook'
+import { parseJsonFile } from '../load-jsconfig'
+import { transform } from '../swc'
+
+function resolveSWCOptions(
+  cwd: string,
+  compilerOptions: CompilerOptions
+): SWCOptions {
+  const resolvedBaseUrl = join(cwd, compilerOptions.baseUrl ?? '.')
+  return {
+    jsc: {
+      target: 'es5',
+      parser: {
+        syntax: 'typescript',
+      },
+      paths: compilerOptions.paths,
+      baseUrl: resolvedBaseUrl,
+    },
+    module: {
+      type: 'commonjs',
+    },
+    isModule: 'unknown',
+  } satisfies SWCOptions
+}
+
+async function lazilyGetTSConfig(cwd: string) {
+  let tsConfig: { compilerOptions: CompilerOptions }
+  try {
+    tsConfig = parseJsonFile(join(cwd, 'tsconfig.json'))
+  } catch (error) {
+    // ignore if tsconfig.json does not exist
+    if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+      throw error
+    }
+    tsConfig = { compilerOptions: {} }
+  }
+
+  return tsConfig
+}
+
+export async function transpileConfig({
+  nextConfigPath,
+  cwd,
+}: {
+  nextConfigPath: string
+  cwd: string
+}) {
+  let hasRequire = false
+  try {
+    const { compilerOptions } = await lazilyGetTSConfig(cwd)
+    const swcOptions = resolveSWCOptions(cwd, compilerOptions)
+
+    const nextConfigString = await readFile(nextConfigPath, 'utf8')
+    const { code } = await transform(nextConfigString, swcOptions)
+
+    // register require hook only if require exists
+    if (code.includes('require(')) {
+      registerHook(swcOptions)
+      hasRequire = true
+    }
+
+    // filename & extension don't matter here
+    return requireFromString(code, join(cwd, 'next.config.compiled.js'))
+  } catch (error) {
+    throw error
+  } finally {
+    if (hasRequire) {
+      deregisterHook()
+    }
+  }
+}
@@ -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/next-config-ts/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')
 
+    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,11 +1008,13 @@ 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`
       )
       throw err
     }
+
     const userConfig = await normalizeConfig(
       phase,
       userConfigModule.default || userConfigModule
@@ -1105,20 +1117,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. Please replace the file with 'next.config.js', 'next.config.mjs', or 'next.config.ts'.`
       )
     }
   }

@@ -61,7 +61,11 @@ 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',
+]
 export const BUILD_ID_FILE = 'BUILD_ID'
 export const BLOCKED_PAGES = ['/_document', '/_app', '/_error']
 export const CLIENT_PUBLIC_FILES_PATH = 'public'

@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>{process.env.foo}</p>
+}
@@ -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')
+  })
+})
@@ -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
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>{process.env.foo}</p>
+}
@@ -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')
+  })
+})
@@ -0,0 +1,9 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  env: {
+    foo: 'foo',
+  },
+}
+
+export { nextConfig as default }
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>{process.env.foo}</p>
+}
@@ -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')
+  })
+})
@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+export default {
+  env: {
+    foo: 'foo',
+  },
+} satisfies NextConfig
@@ -0,0 +1 @@
+!tsconfig.json
@@ -0,0 +1 @@
+export const bar = 'bar'
@@ -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')
+  })
+})
@@ -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
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>{`${process.env.foo + process.env.bar}`}</p>
+}
@@ -0,0 +1 @@
+export const foo = 'foo'
@@ -0,0 +1,13 @@
+/**
+ * comment
+ */
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    /* comment */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"] // comment
+    }
+  }
+}
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}