Adding TS to Next.js


Updated Aug 26th, 2022

Some notes from Bruno Antunes. Video here

Adding TS to Next.js app is much easier than you might imagine.

The process depends on whether you are starting from scratch or implementing inside an existing project.

From Existing

Create a hand-drawn dependency graph or tree of your components. Start with most-specific/deepest leaf and work to a broader point so you don’t start with lots of errors. This approach should be less painful.

You will have to consider which packages offer type definitions. For instance Material UI and Axios offers type definitions out of the box. For those don’t you may need to install a type package (example: Yup does not so install @types/yup).

Rename components from having “.js” file extension to “.tsx” and TS will start to complain about the errors until we fix them. We also get an error from Next.js that we need to install packages for TS.

This error message is so good we can literally just copy/paste it to install: –save-dev typeScript at @types/react and @types/node.

This will give you a “tsconfig.json” file in your route directory. Next.js sets a lot of good defaults for us. Bruno changes “strict” from false to true.

Now look at your dependency tree (concept explained above) to see what is yellow (which means you need to install type support).

Go to “npmjs” or GitHub to find types packages needed. You can also write your own but this is very unlikely to be necessary.

You will now be seeing TypeScript errors so go in and refactor code to remove all these errors.

From Scratch

If new then run additional scripts after “npx create-next-app@latest –ts”

Note: adding to create-react app is very simple as well, just run “npx create-react-app folderName –template typescript.”

Next build handles the type checking. Test your build by running NPM serve out.

And watching these videos I realized there’s a with-mongodb starter? Is this a custom starter project I can clone? Learn more about integrating mongo from Max first.

There was an approach I saw where a guy just manually created the “tsconfig.json” file and then tried to run his project and he got the error. Next.js actually just went in and auto-populated his “tsconfig.json” file. I guess it’s the same thing but interesting nonetheless.

TypeScript by default does not understand JSX so if you just have a file with “.ts” extension you will get an error on your entire page.

In the integrated terminal and VS code if you click on the problems tab you’ll see your list of TypeScript errors. Fuck yeah.

Examples of Fixing TS Errors

Create some interfaces and types needed as well as fix the context error.

A seemingly common practice in Next JS is to add “export interface whatEvs” to create an interface for your props (which are passed into your component, especially if using GSSP or GSP).

Using a question mark for optional chaining is a common way that fix bugs as well (property does not exist or “object is possibly undefined”).

You can put interface code in separate files and import them in.

Note if you don’t want to keep using or (“| undefined”) you can put a question mark on the interface property name between name and colon.