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

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:

• Prerendering
  • Server-side rendering (SSR)
  • Static export (SSG)
• Automatic build size optimization
• Faster development compilation
• Page based routing (with support for dynamic routes)
• Client-side routing with prefetching
• Built-in CSS and Sass support, and support for any CSS-in-JS library
• API routes to build API endpoints with Serverless Functions

Steps to convert your NextJS application to use TypeScript

1. Open a terminal and navigate to the directory of your project's root folder
2. Run the command npm install touch-cli
3. Run the command touch tsconfig.json
   • If touch command is not found:
     • run npm install touch-cli -g
     • run touch tsconfig.json again
4. Run the command npm install --save-dev typescript @types/react
5. Run nest (normally npm run dev or yarn dev)
6. Start converting your js files into ts/tsx files!
   • 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.

---

• Photo by Nick Fewings