How to Add Typescript to an Existing Next.Js Project

To migrate your project from JavaScript to Typescript, follow the steps below:

Install Typescript

In your project terminal run:

npm i -D typescript @types/react

Create a tsconfig.json file

Create a tsconfig.json tile in the root of your project.

If you already had a jsconfig.json file, copy the paths compiler option from the old jsconfig.json file into the new tsconfig.json file and delete the old jsconfig.json file.

Add Typescript to your project

Finally, add typescript to your project by renaming a file to .ts / .tsx.

Run next dev to automatically populate the tsconfig.json file you created above.

Your terminal should output something similar to the output below:

npm run dev

> dev
> next dev

- info Loaded env from /home/murage/Documents/projects/47places/.env.local
- ready started server on [::]:3000, url: http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.