I already have a running NextJS project but I want to start using typescript. Lets see how to add typescript in existing NextJS project
This setup tested in NextJS v12
Create tsconfig.json file
Go to your project directory , then add new empty file tsconfig.json or via terminal
Install typescript requirement on NextJS
Stop the server if it’s currently running. Then run
yarn dev or
npm run dev. And you’ll see what needs to be installed.
At this time of writing, we need to add types for react and node package. (Since Nextjs is consist of react and nodejs)
yarn add --dev typescript @types/react @types/node
yarn add to
npm install if using npm
You can see now your tsconfig.json file is filled with default options.
Start with your typescript file!
yarn dev again and now your project is up and running.
By default js file will still works. To start leveraging typescript benefits, change your file with
You can learn about typescript from the official website
From official NextJS documentation
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