How to convert Nextjs to TypeScript?

Introduction

Before we move on exploring how to convert an existing Nextjs app to TypeScript let us see the motivation behind converting to TypeScript.

I had been running my blog with Nextjs and it was originally created in JavaScript using the default command npx create-next-app.

After exploring several Nextjs projects I found out that all of them were using TypeScript and had .tsx files instead of js.

TypeScript has some benefits over JavaScript. We will see some of these benefits in the next section.

This is the reason developer now a days people prefer to create the project in TypeScript.

Why convert the project to TypeScript ?

TypeScript is the superset of the JavaScript. The code written in TypeScript gets transpiled to JavaScript.

Finally JavaScript is the language that is understood by the browsers. TypeScript is not the only language that gets transpiled to JavaScript. There are other languages that gets transpiled to JavaScript. These are Dart, Elm, PureScript, Coffeescript, ClojureScript, Scala, Reason, Haxe, Nim etc...

1. Type checking - The name TypeScript itself gives a sense of the language it is. It is a strictly typed language just like C# and Java.

2. Compilation Errors - JavaScript is a dynamic language. You get to know the errors only after the execution. TypeScript is a statically typed language and it reports errors during compilation. This helps us in building a more efficient application and resolving issues upfront.

3. Ease of development - Once the developer becomes comfortable with the language the development becomes very easy as compared to JavaScript. It is easy to understand the code for new developers that joins the team.

4. Popularity- TypeScript is a very popular language and it is now used with almost all the front end frameworks. There is a vast community support in case we are stuck on an issue. It is used by Angular as the default language.

Configuring TypeScript in the project

You can create the Nextjs app with TypeScript by default or you can configure the existing Nextjs app to work with TypeScript.

Considering the features that TypeScript have over JavaScript let is configure our project with TypeScript.

If you are creating a project from scratch you can use the below mentioned command to create a Nextjs app with TypeScript support.

npx create-next-app@latest --ts

Convert an existing Nextjs app to TypeScript

We would be migrating our Nextjs app from JavaScript to TypeScript. We will first create a Nextjs app with default javascript.

In case you existing project is already huge you can migrate it completely by following similar steps to all the js files in your project.

You will have to resolve all the type checking errors and provide the respective types. You may also have to create classes, interface, enums etc... for the complete migration.

If this is complex for your setup you can choose to migrate incrementally starting with the new development in the project.

npx create-next-app my-app

Let us now migrating this project from js to ts.

Open up the existing Nextjs app in the code editor. Create an empty tsconfig.json file in the root folder.

If your app is already running exit the app by pressing Ctrl+c and rerun the app by npm run dev.

The terminal itself will guide you with the next steps to configure TypeScript.

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/react and @types/node by running:

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

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).       

Let us install the packages and then run the app with npm run dev.

You would notice that the tsconfig.json is populated with some default configuration and a file named next-env.d.ts file

is created in the root of the project.

This file will make TypeScript aware of the types available in Nextjs. You can turn on the strict feature of TypeScript in

the tsconfig.json file for TypeScript to report the type checking errors.

Now the files in the project should be all .tsx instead of .js. Rename the file _app.js to _app.tsx.

As soon as you rename the file to .tsx the TypeScript type checking comes into action and the code inside _app.tsx starts complaining.

Replace the code inside the file with this one.

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Basically here we are trying to specify the type name that is passed to the MyApp function and the type is AppProps.

You would notice that the import statement in _app.tsx still complains Cannot find module 'next/app'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?ts(2792)

To resolve this let us add the below key-value pair in the tsconfig.json right above the resolveJsonModule.

"moduleResolution": "node",

Rename the index.js file inside the pages folder to index.tsx. We are now done with the migration of our newly created Nextjs app from JavaScript to TypeScript.

Conclusion

In this post we covered the following.

1. The benefits of using TypeScript and Why convert our project to TypeScript.
2. Creating a new Nextjs project with TypeScript support.
3. Converting an existing Nextjs project to TypeScript.

Please share the post by clicking the social media icons at the beginning of the post.

Thank you for reading and see you in the next post !👋