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. Registers the Next.js TypeScript plugin for framework-aware editor and compiler behavior.
  5. Leaves output ownership to the selected role so framework settings stay focused and reviewable.

Usage

Add the preset after the essentials, strict, app-role, and browser-runtime layers.

tsconfig.json
json
{
  "extends": [
    "@cbnventures/nova/presets/tsconfig/dx-essentials.json",
    "@cbnventures/nova/presets/tsconfig/dx-strict.json",
    "@cbnventures/nova/presets/tsconfig/role-app.json",
    "@cbnventures/nova/presets/tsconfig/runtime-browser.json",
    "@cbnventures/nova/presets/tsconfig/fw-nextjs.json"
  ],
  "compilerOptions": {
    "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.
plugins[{ "name": "next" }]Enables Next.js-aware TypeScript language-service behavior.