Next.js and Typescript
Tags: typescript, react, nextjs, webdev
Published: 2023-01-31 20:29:59

I have been [trying Next.js](https://dev.to/celest67/trying-nextjs-4ee4) in different aspects, for example you can read more about deployment [here](https://dev.to/celest67/deployment-with-nextjs-41j7) 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](https://dev.to/celest67/trying-nextjs-4ee4) 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

![npm run dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/678qx1g0zpuestz6kjwn.png)

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

![tsconfig json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3dbi97tdourw2f6z4yx.png)

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

![package json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uj3fwilll4f2nz9cgj4y.png)

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](https://www.youtube.com/@WebDevSimplified) here you can get more details in this [video](https://www.youtube.com/watch?v=bAJlYgeovlg). 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](https://github.com/WebDevSimplified/react-select)

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.

![import select](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85txzuu48yfragg14vzm.png)

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

![IDE type error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/im1pj1i42zxs3nkdl3xx.png)

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

![browser type error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63d5rn06lmps52rlj8y1.png)

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](https://github.com/celest67/nextjs-try1/tree/typescript-select), 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!

![error on build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x0wpsvrvpm3nsnktfsb.png)

That is it for now ;-)

Cheers!