DEV Community

Cover image for Add Typescript to an existing NextJS Project in 5 mins
sushmeet sunger
sushmeet sunger

Posted on • Updated on

Add Typescript to an existing NextJS Project in 5 mins

Introduction

Image description

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

Image description

  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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"]
}
Enter fullscreen mode Exit fullscreen mode

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

Tadaaa

Image description

  • 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

Top comments (4)

Collapse
 
thehaystacker profile image
The Haystacker • Edited

I'm getting this warning in the tsconfig.json file.

Option '--resolveJsonModule' cannot be specified without 'node' module resolution strategy.ts

How to solve this?

Edit: I solved this issue by adding this line of code.

// Add the rule below
"moduleResolution": "node",

Collapse
 
paul_emechebe profile image
Paul-Simon Emechebe

Thanks man, saw this error and was already getting ready to scour stack overflow, but you saved me with this.

Collapse
 
anchaaay profile image
anchaaay

Thank you so much, this post saves me!

Collapse
 
hasone profile image
HasOne • Edited

If you are bash lover, here is life-saver command for you:

find . -path ./node_modules -prune -o -type f -name "*.js" -exec sh -c 'mv "$0" "${0%.js}.tsx"' {} \;
Enter fullscreen mode Exit fullscreen mode

It will rename all the .js files to tsx within few seconds, no manually renaming it. isn't it awesome?!