tsconfig.json for Next.js Projects
Next.js has specific TypeScript requirements. Use the Next.js preset in the builder above to generate the recommended tsconfig.json, then customize it for your project.
tsconfig.json Visual Builder
Build your TypeScript configuration visually with explanations for every option. Start from a preset or customize from scratch.
Presets
Set the JavaScript language version for emitted output.
Specify what module code is generated.
Strategy for resolving import specifiers.
Library files to include in the compilation.
Enables: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, alwaysStrict, useUnknownInCatchVariables
Additional (not included in strict)
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "Bundler",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true
},
"include": [
"src"
],
"exclude": [
"node_modules"
]
}7
Options set
ON
Strict mode
302
Bytes
Press Ctrl+Enter to copy
Why Next.js uses specific tsconfig settings
Next.js uses 'jsx': 'preserve' because it handles JSX transformation internally via SWC. 'moduleResolution': 'Bundler' matches how Next.js resolves imports. 'noEmit': true prevents tsc from outputting files since Next.js builds with its own compiler. 'incremental': true enables faster type-checking by caching build information.
Next.js path aliases
Next.js supports path aliases via the paths option. The most common pattern is '@/*': ['./src/*'] which lets you import from '@/components/Header' instead of '../../../components/Header'. Next.js automatically configures its bundler to resolve these aliases — no additional Webpack or Turbopack configuration is needed.
The next-env.d.ts file
Next.js generates a next-env.d.ts file that includes type declarations for Next.js-specific features like next/image, next/link, and environment variables. This file should be included in your tsconfig's include array and added to .gitignore. Never edit it manually — Next.js regenerates it on every build.
Frequently Asked Questions
What target should I use for Next.js?
Next.js recommends 'target': 'ES2017'. This is the minimum target that supports async/await without downlevel transformation. Since Next.js transpiles your code with SWC, the target mainly affects type-checking behavior, not the actual output.
Should I use isolatedModules with Next.js?
Yes. Next.js uses SWC which transpiles files individually (not as a whole program). isolatedModules: true ensures your code is compatible with single-file transpilation by flagging patterns that require full program analysis, like const enums across files.
How do I add custom type declarations in Next.js?
Create a declarations.d.ts (or any .d.ts file) in your project root and make sure it is covered by the include array. For example, declare module '*.svg' { const content: string; export default content; } lets you import SVG files as strings.
Related Generate Tools
README Generator
Generate professional GitHub README.md files with badges, installation steps, usage examples, and more
robots.txt Generator
Generate robots.txt files with crawl rules for Googlebot, Bingbot, AI bots, and more — presets included
Zod Schema Generator
Generate Zod validation schemas from JSON — auto-detects emails, URLs, UUIDs, dates, and nested objects
Placeholder Image Generator
Generate custom placeholder images for wireframes, mockups, and prototyping with custom dimensions and colors