Nextjs with Typescript integration and example

This tutorial will show how to integrate TypeScript to your Nextjs applications. For this purpose we should install required typescript libraries for our Nextjs project.

If you are starting a new project and start with Typescript you can also create a new nextjs application in a seconds with

npx create-next-app your-app-name

Install required libraries for Typescript support

// with Npm
npm install -D typescript @types/react @types/node
// with Yarn
yarn add — dev typescript @types/react @types/node

Inside the root folder to be able to use TypeScript tsconfig.json needs to be added.

tsconfig.js

As you can see in the include array we defined some file endings.

"next-env.d.ts",
"**/*.ts",
"**/*.tsx"

Our typescript configuration will work on these files. Now we can start using typescript in our project!

Usage