Skip to main content

Framework - Next.js

Configure TypeScript for a Next.js app so the compiler matches the bundler that builds your project.

Why Use This Preset?

  1. Sets bundler-style module resolution so imports resolve the way Next.js expects.
  2. Includes DOM libraries so browser globals and React component code type-check correctly.
  3. Enforces isolated modules so each file transpiles independently under the bundler.
  4. Disables TypeScript emit so Next.js owns output and tsc stays a type-checker.
  5. Layers cleanly after dx-essentials and dx-strict so framework settings stay in their own reviewable layer.

Usage

Add the preset to the extends array of your tsconfig.json, after the essentials and strict layers.

tsconfig.json
json
{
  "extends": [
    "@cbnventures/nova/presets/tsconfig/dx-essentials.json",
    "@cbnventures/nova/presets/tsconfig/dx-strict.json",
    "@cbnventures/nova/presets/tsconfig/fw-nextjs.json"
  ],
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "./next-env.d.ts",
    "./src/**/*"
  ],
  "exclude": [
    "./.next/**",
    "./node_modules/**"
  ]
}

What This Preset Configures

This preset sets the following compilerOptions.

SettingValueDescription
isolatedModulestrueEnforces per-file compilation so the bundler can transpile each file independently.
lib["DOM", "DOM.Iterable", "ESNext"]Provides browser DOM globals plus the latest ECMAScript APIs.
module"ESNext"Emits modern ECMAScript module syntax for the bundler to consume.
moduleResolution"Bundler"Resolves imports the way a bundler does, matching Next.js.
noEmittrueStops tsc from writing JavaScript, leaving output to Next.js.