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.
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 -vin your terminal. Or you can download the latest version here.
P.S: We will be using
yarn for this setup.
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).
cd into the directory, for me it is
cd nextjs-typescript-starter and type
code . to open the project in vscode.
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.
Install the necessary development dependencies
yarn add --dev typescript @types/react @types/node
tsconfig file is automatically updated and that completes the setup.
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.