Enable TypeScript support in a Next.js app

Next.js

Share this video with your friends

Next.js comes with a TypeScript support out of the box, but not by default (after all, not every project uses TypeScript!)

In this quick lesson we're going to learn how to enable TypeScript support in a Next.js app and how to enable strict mode in TypeScript (since it's disabled by default in Next.js)

flied onion

~ 4 years ago

If you use pnpm as package manager, DO NOT use pnpm for install typescript and @types instead of npm or yarn, or you get warning and errors.

Warning when install typescript and @types I've got when I used pnpm:

% pnpm install --save-dev typescript @types/react @types/node
 WARN  Moving next that was installed by a different package manager to "node_modules/.ignored
 WARN  Moving react that was installed by a different package manager to "node_modules/.ignored
 WARN  Moving react-dom that was installed by a different package manager to "node_modules/.ignored

I've got following internal server error after install above:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

more detail: previous lesson's Discuss