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.

NextJS 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 to 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

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 the 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. Share your questions or comments with us on Linkedin or Twitter.

If you encounter any difficulties or unexpected "gotchas" – don't hesitate to reach out to us for help in converting your app.

Sources

https://nextjs.org/
https://nextjs.org/docs/basic-features/typescript
https://www.ideamotive.co/blog/nextjs-vs-react-which-javascript-framework-is-better-for-your-front-end
https://enlear.academy/next-js-or-react-js-lets-find-out-60c77373da85
Photo by Nick Fewings