Next.js and Typescript

I have been trying Next.js in different aspects, for example you can read more about deployment here but now I want to check out how does Next.js behave with Typescript, maybe ts is not that necessary in small projects but in big projects with many developers for me is a must, that is why I just had to test it.

Next.js provides an integrated TypeScript experience, including zero-configuration set up and built-in types for Pages, APIs, and more.

If you are just starting a project with Next.js you can just run this command below and it will create you a project from scratch.

npx create-next-app@latest --ts

But I already created a project here so I want to try and transform this project, following the instructions. First I have to create an empty file called tsconfig.json and then run npm run dev

Next.js will automatically detect TypeScript usage and install the required packages

Now if I look at my tsconfig.json this is what I see

This process also created a file next-env.d.ts and added the necessary dependencies to my package.json

Next we have to update my javascript files into Typescript, this means that now my index.js is going to be index.tsx and the app should keep working the same as before, because I just have the basic project from the beginning.

So, now I want to try to build something that actually checks types. Since my goal is not actually teaching you typescript I'm going to follow a project by @WebDevSimplified here you can get more details in this video. But to give you an idea the description of the video is

Select components are one of the most important components you will use in React, but how exactly do you create a good select component. In this video I will breakdown how to create a select component in React using only TypeScript and no additional React libraries.

The code for this is available in WebDevSimplified Github

Following Next.js guidelines I'm going to create a folder called components where I will create my select component.

Then I'm going to import it to my index.

And just to make sure that everything is working properly and validating types as it should, I'm going to change one of my variables from an array to a number and as you can see my IDE let's me know of my error

But also I can see the error if I try to run npm run dev

So we are really working with typescript and you have all the benefits that come from it.

Everything that we have seen here is in my github in this branch, so if you want to play with it you can and also if you know how to fix the issue in components/select.tsx ln 42 let me know!! Because if you try to build the app you are going to get an error!

That is it for now ;-)

Cheers!