feat: allow setting custom tsconfig file

docs/basic-features/typescript.md

@@ -35,6 +35,8 @@ touch tsconfig.json
 
 Next.js will automatically configure this file with default values. Providing your own `tsconfig.json` with custom [compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) is also supported.
 
+You can also provide a relative path to a tsconfig.json file by setting `typescript.tsconfigPath` prop inside your `next.config.js` file.
+
 > Next.js uses Babel to handle TypeScript, which has some [caveats](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats), and some [compiler options are handled differently](https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options).
 
 Then, run `next` (normally `npm run dev` or `yarn dev`) and Next.js will guide you through the installation of the required packages to finish the setup:

packages/next/build/index.ts

@@ -197,6 +197,7 @@ export default async function build(
           pagesDir,
           !ignoreTypeScriptErrors,
           !config.images.disableStaticImages,
+          config,
           cacheDir
         )
       )

packages/next/build/webpack-config.ts

@@ -203,6 +203,8 @@ const NODE_ESM_RESOLVE_OPTIONS = {
   fullySpecified: true,
 }
 
+let TSCONFIG_WARNED = false
+
 export default async function getBaseWebpackConfig(
   dir: string,
   {
@@ -378,14 +380,21 @@ export default async function getBaseWebpackConfig(
   try {
     typeScriptPath = require.resolve('typescript', { paths: [dir] })
   } catch (_) {}
-  const tsConfigPath = path.join(dir, 'tsconfig.json')
+  const { tsconfigPath } = config.typescript
+  const tsConfigName = tsconfigPath
+  const tsConfigPath = path.join(dir, tsConfigName!)
   const useTypeScript = Boolean(
     typeScriptPath && (await fileExists(tsConfigPath))
   )
 
   let jsConfig
   // jsconfig is a subset of tsconfig
   if (useTypeScript) {
+    if (tsConfigName !== 'tsconfig.json' && TSCONFIG_WARNED === false) {
+      TSCONFIG_WARNED = true
+      Log.info(`Using tsconfig file: ${tsConfigName}`)
+    }
+
     const ts = (await import(typeScriptPath!)) as typeof import('typescript')
     const tsConfig = await getTypeScriptConfiguration(ts, tsConfigPath, true)
     jsConfig = { compilerOptions: tsConfig.options }

packages/next/lib/typescript/getTypeScriptIntent.ts

@@ -1,15 +1,18 @@
 import { promises as fs } from 'fs'
 import path from 'path'
+import { NextConfigComplete } from '../../server/config-shared'
 import { fileExists } from '../file-exists'
 import { recursiveReadDir } from '../recursive-readdir'
 
 export type TypeScriptIntent = { firstTimeSetup: boolean }
 
 export async function getTypeScriptIntent(
   baseDir: string,
-  pagesDir: string
+  pagesDir: string,
+  config: NextConfigComplete
 ): Promise<TypeScriptIntent | false> {
-  const tsConfigPath = path.join(baseDir, 'tsconfig.json')
+  const tsConfigName = config.typescript.tsconfigPath
+  const tsConfigPath = path.join(baseDir, tsConfigName!)
 
   // The integration turns on if we find a `tsconfig.json` in the user's
   // project.

packages/next/lib/verifyTypeScriptSetup.ts

@@ -14,6 +14,7 @@ import { TypeCheckResult } from './typescript/runTypeCheck'
 import { writeAppTypeDeclarations } from './typescript/writeAppTypeDeclarations'
 import { writeConfigurationDefaults } from './typescript/writeConfigurationDefaults'
 import { missingDepsError } from './typescript/missingDependencyError'
+import { NextConfigComplete } from '../server/config-shared'
 
 const requiredPackages = [
   { file: 'typescript', pkg: 'typescript' },
@@ -26,13 +27,15 @@ export async function verifyTypeScriptSetup(
   pagesDir: string,
   typeCheckPreflight: boolean,
   imageImportsEnabled: boolean,
+  config: NextConfigComplete,
   cacheDir?: string
 ): Promise<{ result?: TypeCheckResult; version: string | null }> {
-  const tsConfigPath = path.join(dir, 'tsconfig.json')
+  const tsConfigName = config.typescript.tsconfigPath
+  const tsConfigPath = path.join(dir, tsConfigName!)
 
   try {
     // Check if the project uses TypeScript:
-    const intent = await getTypeScriptIntent(dir, pagesDir)
+    const intent = await getTypeScriptIntent(dir, pagesDir, config)
     if (!intent) {
       return { version: null }
     }

packages/next/server/config-shared.ts

@@ -34,6 +34,8 @@ export interface ESLintConfig {
 export interface TypeScriptConfig {
   /** Do not run TypeScript during production builds (`next build`). */
   ignoreBuildErrors?: boolean
+  /** Relative path to a custom tsconfig file */
+  tsconfigPath?: string
 }
 
 export type NextConfig = { [key: string]: any } & {
@@ -153,6 +155,7 @@ export const defaultConfig: NextConfig = {
   },
   typescript: {
     ignoreBuildErrors: false,
+    tsconfigPath: 'tsconfig.json',
   },
   distDir: '.next',
   cleanDistDir: true,

packages/next/server/dev/next-dev-server.ts

@@ -290,7 +290,8 @@ export default class DevServer extends Server {
       this.dir,
       this.pagesDir!,
       false,
-      !this.nextConfig.images.disableStaticImages
+      !this.nextConfig.images.disableStaticImages,
+      this.nextConfig
     )
 
     this.customRoutes = await loadCustomRoutes(this.nextConfig)

test/integration/typescript-custom-tsconfig/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  typescript: {
+    tsconfigPath: 'web.tsconfig.json',
+  },
+}

test/integration/typescript-custom-tsconfig/pages/index.tsx

@@ -0,0 +1,3 @@
+export default function Index() {
+  return <p>Hello world</p>
+}

test/integration/typescript-custom-tsconfig/test/index.test.js

@@ -0,0 +1,18 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import { nextBuild } from 'next-test-utils'
+
+const appDir = join(__dirname, '..')
+
+const warnMessage = /Using tsconfig file:/
+
+describe('Custom TypeScript Config', () => {
+  it('should warn when using custom typescript path', async () => {
+    const { stdout } = await nextBuild(appDir, [], {
+      stdout: true,
+    })
+
+    expect(stdout).toMatch(warnMessage)
+  })
+})

test/integration/typescript-custom-tsconfig/web.tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}