Add Typescript to an existing NextJS Project in 5 mins

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

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

Tadaaa

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

Github Example