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 -vin 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.
Top comments (2)
thank you but instead of all the actions you can run:
yarn create next-app --typescript
Amazing article