How to add TypeScript to an existing Next.js project

· — views

Next.js includes support for TypeScript by default. To add TypeScript to an existing Next.js project create a tsconfig.json file in the project root with touch tsconfig.json.

Next, run next dev and the tsconfig.json file will be populated with the default values, you may customise this configuration to your liking. A file called next-env.d.ts will be created at the project root, this file should not be removed or edited.

However, you should add an entry in your .gitignore for next-env.d.ts so it is ignored by version control.

"include": [
    "next-env.d.ts",
    "additional.d.ts"
    "**/*.ts",
    "**/*.tsx"
]

If you need to add additional types, create a additional.d.ts file in your project root and reference it in the include array in tsconfig.json.

    "strict": true

For experienced TypeScript developers, you can enable strict mode by editing tsconfig.json, this setting is disabled by default.

That's it! Your Next.js project is ready to leverage the power of TypeScript.