35
Integrating TypeScript into your NextJS app
By Kim Pham, Senior Front End Developer, Tevpro
A guide to installing Typescript in NextJS apps.
NextJS is a wrapper for ReactJS, providing a more comprehensive framework solution to the popular front-end development library. NextJS allows for developers to use many useful "out-of-the-box" features that would otherwise have to be manually added to the relevant React apps.
*NestJS not only enhances React β it uses React. *
"You still write React code. You still build React components, but itβs a framework for production because it adds all those missing features that you typically need to add to React apps to prepare them for production and solve common problems." - Imran Farooq in an Enlear Academy Article
"You still write React code. You still build React components, but itβs a framework for production because it adds all those missing features that you typically need to add to React apps to prepare them for production and solve common problems." - Imran Farooq in an Enlear Academy Article
What features does NextJS offer?
React itself is minimal, but extremely flexible in its ability to extend unto other features. In contrast, NextJS has a variety of features already included to help developers build their apps, including:
- Server-side rendering (SSR)
- Static export (SSG)
Steps to convert your NextJS application to use TypeScript
npm install touch-cli
touch tsconfig.json
-
If touch command is not found:
- run
npm install touch-cli -g
- run
touch tsconfig.json
again
- run
npm install --save-dev typescript @types/react
npm run dev
or yarn dev
)- Any js files that contain jsx will need to become tsx files
Final thoughts
We hope you found this article useful. If you encounter any difficulties or unexpected "gotchas" β don't hesitate to reach out to us for help in converting your app.
We hope you found this article useful. If you encounter any difficulties or unexpected "gotchas" β don't hesitate to reach out to us for help in converting your app.
35