DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Adewale Olaoye
Adewale Olaoye

Posted on • Updated on

How to Setup Next.js with Typescript

I'm a big fan of Typescript and I love to use it with Next.js for any of my React projects no matter how small, I just love it.

But I find myself googling for setup when I need it, and this has prompted me to write an article about it, I believe writing will also help me understand the setup better and hopefully help you too.

Setup

First, let’s make sure that your development environment is ready.

  • You’ll need Node.js version 10.13 or later. To check your Node.js version, simply type node -v in your terminal. Or you can download the latest version here.

P.S: We will be using yarn for this setup.

Step 1

Run yarn create next-app
You will be asked, "What is your project named?" Type in your project name and click enter (i.e. nextjs-typescript-starter).

Screenshot 2020-11-11 at 18.45.22.png

Step 2

cd into the directory, for me it is cd nextjs-typescript-starter and type code . to open the project in vscode.

Step 3

We need to inform the project that we need typescript, hence we have to create a new file at the root of our project. To do that, type touch tsconfig.json and hit enter.

Step 4

Install the necessary development dependencies
yarn add --dev typescript @types/react @types/node

Step 5

Run yarn dev

Screenshot 2020-11-11 at 18.56.37.png

tsconfig file is automatically updated and that completes the setup.

Conclusion

While I'm still learning how to use Typescript better in React apps, It's a tool I can't do without.
Thank You for reading.

Top comments (2)

Collapse
 
promikecoder2020 profile image
ProMikeCoder2020

Amazing article

Collapse
 
amirjafari1992 profile image
Amir Jafari

thank you but instead of all the actions you can run:
yarn create next-app --typescript

Become a ModeratorHey! We would love your help!

Fill out this survey and help us moderate our community by becoming a tag moderator here at DEV.