Introduction

So your team and you have heard all the hype about Typescript and would like to add it to your existing NextJS project. Or you are a seasoned Typescript expert and want to introduce it at your current organization, so as to give everyone a chance to opt in and use Typescript and Javascript side by side. So how complicated is this and where do you start?

Process
Usually adding typescript to any project requires you to have a tsconfig.json, which sits at the root of a project.The tsconfig.json file specifies the root files and the compiler options required to compile the project.

Lets Do This

• Create an empty file named tsconfig.json at the root of your project. You can do so by creating a new file in your editor or typing the following command

touch tsconfig.json

• Now just run your Next application as usual with npm run dev or yarn dev

• Once you do this, NextJS will try to help you for the rest of the installation process, which requires installing typescript and it's dependencies. Have a look at your terminal or server and copy and paste the command that is present.

With NPM

npm install --save-dev typescript @types/react @types/node

With Yarn

yarn add --dev typescript @types/react @types/node

This is what the auto-generated tsconfig.json should look like

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "/*.ts", "/*.tsx"],
"exclude": ["node_modules"]
}

> _Important_
 These are dev dependencies and are needed only in your development workflow but not while running your code.

**Tadaaa**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxrob5akitqbpyi9ldad.jpg)

- Now restart your server and you will see `next-env.d.ts` file created at the root of your server. This file ensures Next.js types are picked up by the TypeScript compiler. You cannot remove it or edit it as it can change at any time.
-  You will also see the `.tsconfig.json` file to be pre-populated for you.
- Now that you have typescript installed, you can start converting your `.js` files into `.tsx`, or just start creating new `.tsx` files. 
- TypeScript strict mode is turned off by default. When you feel comfortable with TypeScript, it's recommended to turn it on in your tsconfig.json. like so ` "strict": true`

**References**

-  [Official NextJS documentation](https://nextjs.org/docs/basic-features/typescript)
- [Github Example](https://github.com/vercel/next.js/tree/canary/examples/with-typescript)