Integrating TypeScript into your NextJS app

By Kim Pham, Senior Front End Developer, Tevpro

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

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

Open a terminal and navigate to the directory of your project's root folder

Run the command npm install touch-cli

Run the command touch tsconfig.json

• If touch command is not found:
  • run npm install touch-cli -g
  • run touch tsconfig.json again

Run the command npm install --save-dev typescript @types/react

Run nest (normally npm run dev or yarn dev)

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