Learn how to add TypeScript to your Next.js project.

Combine the best framework with the best language to provide the best websites with the best user & developer experiences.

Why Next.js + Typescript

Better DX
Don’t make programming a pain in the ass. Everyone loves clean code and an easy-to-maintain codebase.
Installation
Avoid Errors
Spot dumb errors in development, instead of in production mode.
Installation
Be modern
Use new Javascript features with Typescript. Don’t worry about compatibility. That’s Typescript’s job.
Installation
Use your IDE
Help your IDE understand your code better, so it can help you writing better code.
Installation
Fully supported
Next.js fully supports Typescript. It’s just a few commands away.
Documentation
Next.js Features
Use all features Next.js provides. SEO, Image Optimization, Fast Refresh, Zero Config, and more!
Documentation

How to add Typescript to Next.js

Start with your Next.js app
Bash
npx create-next-app .
Nothing fancy yet, just create a new Next.js app and continue with the next step.
Supported by 9+ cross-platform IDE's
Visual Studio Code
Neovim
Webstorm
Netbeans
Vim
IntelliJ IDEA
Repl.it
Sublime Text
Eclipse
Create your tsconfig.json
Bash
touch tsconfig.json
The `tsconfig.json` file contains all configuration for Typescript. You don’t need to write anything to it.
Add Typescript
Bash
yarn run dev yarn add -D typescript yarn add -D @types/react @types/node
After starting the server, you will see instructions on how to install Typescript. Follow them. Many packages do not provide Typescript definitions. That's why it's a good idea to install the packages from DefinitelyTyped via @types/<your_package_name>.
Check out DefinitelyTyped
You're ready!
Great job, let's make some awesome projects using Typescript! You can rename your ".js" files to ".ts" (and ".jsx" to ".tsx") now.
Use js-to-ts-converter