How to Setup Next.js with Typescript

Adewale Olaoye — Wed, 11 Nov 2020 20:35:56 +0000

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.

DEV Community: Adewale Olaoye