How to add TypeScript to an existing Next.js project

Using TypeScript giving you type safety at any scale, catching bugs in development time and better intellisense in most IDE’s.

If you decide to migrate your project from JavaScript to TypeScript, in this post I’ll take close look how to add it to write safe Next.js apps.

Install TypeScript and dependencies

Open your terminal and run this commands below

npm i -D typescript @types/react

You need to add types of 3rd party packages that installed in our project like styled-components, jest and others. Add ‘@types/’ to front of your dependency’s name and run the command. For example:

npm i -D @types/jest @types/styled-components @types/axios

Next step

Create tsconfig.json file on root of your project and eestart your development server. Next.js will populate the tsconfig.json file for you.

Now you can rename your .js and .jsx files to .tsx and .ts.

That’s all! Now your app powered by TypeScript!