Custom types definitions in NextJS

In your Next.js TS project, you can store your custom type definitions (.d.ts files) in the types directory at the root level of your project (Convention)

my-nextjs-app/ 
├── components/ 
├── pages/ 
├── styles/ 
├── types/ 
│   └── my-module.d.ts 
├── utils/ 
├── next.config.js 
├── package.json 
├── tsconfig.json 
└── yarn.lock`

The my-module.d.ts file contains the type definitions for the my-module module you are using in your project.

Inform TypeScript of your custom types

To ensure that TypeScript can find and use your custom type definitions, you need to configure the typeRoots option in your tsconfig.json file. Update the tsconfig.json file as follows:

{   
	"compilerOptions": {     
		"typeRoots": ["./types", "./node_modules/@types"]   
	},   
	// Other configuration options... 
}

By adding "./types" to the typeRoots array, TypeScript will look for type definitions in the types directory relative to your project’s root.