DEV Community

Adewale Olaoye
Adewale Olaoye

Posted on • Edited on

4 1

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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (2)

Collapse
 
amirjafari1992 profile image
Amir Jafari

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

Collapse
 
promikecoder2020 profile image
ProMikeCoder2020

Amazing article

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay