In this blog, we are going to see how easily we can implement TypeScript into a nextjs project. Are you excited? It's super simple to do trust me 😉
Here is how to do it
To use typescript in our next js project we have to create a nextjs project first or if you already have a project then it's pretty easy to upgrade your project to TypeScript.
To use TypeScript you need to install or add(if you are using yarn) typescript dependency plus types for react dependency. After that just by changing the file extensions from
.tsx next js will automatically recognize you are using typescript and it will generate a config file for
tsconfig.json for your project.
Let's see the process step by step
Step 1 - Create a next.js project
The easiest way to create a next.js project is to use the
npx create-next-app my-project-name
This will create a nextjs project for you. Here is the file structure
Step 2 - Add extra dependencies for typescript
For TypeScript to work you have to install
typescript as a dev dependency plus types for React and react-dom in your project. To do this just simply run this command
// if you are using yarn yarn add -D typescript @types/react @types/react-dom // if you are using npm npm i -D typescript @types/react @types/react-dom
Step 3 - Change extensions from
Finally, we can just change all the extensions from
It should look like this
Step 4 - All done! run your project 🎉
All done. Run your project.
// if you are using yarn yarn dev // if you are using npm npm run dev
While running, next js will detect that you are using TypeScript and it will generate a config file for your project in the root directory
All done 🥳🎉
I hope this blog helped you with implementing TypeScript into your nextjs project 😊