feat: support next.config.ts

packages/next/package.json

@@ -87,8 +87,10 @@
     "@swc/helpers": "0.5.1",
     "busboy": "1.6.0",
     "caniuse-lite": "^1.0.30001406",
+    "jiti": "1.18.2",
     "postcss": "8.4.14",
     "styled-jsx": "5.1.1",
+    "sucrase": "3.32.0",
     "watchpack": "2.4.0",
     "zod": "3.21.4"
   },

packages/next/src/server/config.ts

@@ -4,6 +4,8 @@ import { pathToFileURL } from 'url'
 import { Agent as HttpAgent } from 'http'
 import { Agent as HttpsAgent } from 'https'
 import findUp from 'next/dist/compiled/find-up'
+import jitiFactory from 'jiti'
+import { transform } from 'sucrase'
 import chalk from '../lib/chalk'
 import * as Log from '../build/output/log'
 import { CONFIG_FILES, PHASE_DEVELOPMENT_SERVER } from '../shared/lib/constants'
@@ -43,6 +45,21 @@ const experimentalWarning = execOnce(
   }
 )
 
+let jiti: ReturnType<typeof jitiFactory> | null = null
+function lazyJiti() {
+  return (
+    jiti ??
+    (jiti = jitiFactory(__filename, {
+      interopDefault: true,
+      transform: (opts) => {
+        return transform(opts.source, {
+          transforms: ['typescript', 'imports'],
+        })
+      },
+    }))
+  )
+}
+
 export function setHttpClientAndAgentOptions(config: {
   httpAgentOptions?: NextConfig['httpAgentOptions']
 }) {
@@ -776,7 +793,7 @@ export default async function loadConfig(
         // https://github.com/nodejs/node/issues/35889
         userConfigModule = require(path)
       } else {
-        userConfigModule = await import(pathToFileURL(path).href)
+        userConfigModule = await lazyJiti()(pathToFileURL(path).href)
       }
       const newEnv: typeof process.env = {} as any
 
@@ -869,7 +886,6 @@ export default async function loadConfig(
     const nonJsPath = findUp.sync(
       [
         `${configBaseName}.jsx`,
-        `${configBaseName}.ts`,
         `${configBaseName}.tsx`,
         `${configBaseName}.json`,
       ],
@@ -879,7 +895,7 @@ export default async function loadConfig(
       throw new Error(
         `Configuring Next.js via '${basename(
           nonJsPath
-        )}' is not supported. Please replace the file with 'next.config.js' or 'next.config.mjs'.`
+        )}' is not supported. Please replace the file with 'next.config.js' or 'next.config.mjs' or 'next.config.ts'.`
       )
     }
   }

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

@@ -45,7 +45,11 @@ export const DEV_MIDDLEWARE_MANIFEST = '_devMiddlewareManifest.json'
 export const REACT_LOADABLE_MANIFEST = 'react-loadable-manifest.json'
 export const FONT_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'

test/integration/config-syntax-error/test/index.test.js

@@ -6,6 +6,7 @@ import { nextBuild } from 'next-test-utils'
 const appDir = join(__dirname, '..')
 const nextConfigJS = join(appDir, 'next.config.js')
 const nextConfigMJS = join(appDir, 'next.config.mjs')
+const nextConfigTS = join(appDir, 'next.config.ts')
 
 describe('Invalid config syntax', () => {
   it('should error when next.config.js contains syntax error', async () => {
@@ -48,4 +49,26 @@ describe('Invalid config syntax', () => {
     )
     expect(stderr).toContain('SyntaxError')
   })
+
+  it('should error when next.config.ts contains syntax error', async () => {
+    await fs.writeFile(
+      nextConfigTS,
+      `
+      import type { NextConfig } from "next"
+      const config: NextConfig = {
+        reactStrictMode: true,,
+      }
+      export default config
+    `
+    )
+    const { stderr } = await nextBuild(appDir, undefined, {
+      stderr: true,
+    })
+    await fs.remove(nextConfigTS)
+
+    expect(stderr).toContain(
+      '- error Failed to load next.config.ts, see more info here https://nextjs.org/docs/messages/next-config-error'
+    )
+    expect(stderr).toContain('SyntaxError')
+  })
 })

test/unit/isolated/_resolvedata/typescript-config/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const config: NextConfig = {
+  customConfig: true,
+}
+
+export default config

test/unit/isolated/config.test.ts

@@ -82,7 +82,7 @@ describe('config', () => {
       async () =>
         await loadConfig(
           PHASE_DEVELOPMENT_SERVER,
-          join(__dirname, '_resolvedata', 'typescript-config')
+          join(__dirname, '_resolvedata', 'invalid-config')
         )
     ).rejects.toThrow(
       /Configuring Next.js via .+ is not supported. Please replace the file with 'next.config.js'/
@@ -96,4 +96,14 @@ describe('config', () => {
     )
     expect(config.__test__ext).toBe('js')
   })
+
+  it('Should get the configuration from ts config', async () => {
+    process.env.__NEXT_TEST_MODE = ''
+
+    const config = await loadConfig(
+      PHASE_DEVELOPMENT_SERVER,
+      join(__dirname, '_resolvedata', 'typescript-config')
+    )
+    expect(config.customConfig).toBe(true)
+  })
 })