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).

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

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.