How to add TypeScript in Next.js ?

In this article, we will learn how to add TypeScript in Next.js.

Why should we use TypeScript in our project? The fundamental concept of TypeScript is that it is type-strict, which means that each entity, be it a variable, a function, or an object has a definite data type. It allows minimum bugs in the project and quick debugging of the project.

Approaches: There are two ways to add TypeScript in Next.js, depending upon the use case of the user:

• Add TypeScript using create-next-app CLI
• Add TypeScript to an existing project

1. Add TypeScript using create-next-app CLI:

Creating Next.js application: Follow the below steps to create the application:

Step 1: You can add TypeScript right when the Next.js app is created by adding the --typescript or --ts flag in the create-next-app CLI. The command to do so is given below.

npx create-next-app my-project --typescript
# or
npx create-next-app my-project --ts
# or
yarn create next-app my-project --typescript

Project Structure: The file structure of the newly created Next.js app would look like the figure shown below

Note: The --typescript flag also installs ESLint in the project.

The package.json has all the dependencies and dev dependencies installed.

"dependencies": {
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0"
},
"devDependencies": {
    "@types/node": "^17.0.42",
    "@types/react": "^18.0.12",
    "eslint": "8.17.0",
    "eslint-config-next": "12.1.6",
    "typescript": "^4.7.3"
}

• @types/node, @types/react, and @types/react-dom are type definitions for the respective packages. 
• eslint and eslint-config-next are required to run ESLint in the project.
• typescript dependency is also installed. So now we can start creating our TypeScript files.

Example: Consider the code snippet of the index.tsx file below. Here the type of state counter is explicitly specified to be a number. 

import { useState } from "react";
import CounterButton from "../components/CounterButton";

export default function Home() {
    const [counter, setCounter] = useState<number>(0);

    return (
        <div>
            <CounterButton setCounter={setCounter} 
                value={-1} />
            <h1>{counter}</h1>
            <CounterButton setCounter={setCounter} 
                value={1} />
        </div>
    );
}

Create a new folder called components at the root directory of the project. Create a new file CounterButton.tsx and paste the code given below into that file.

import { Dispatch, SetStateAction } from "react";

interface IProps {
    value: number;
    setCounter: Dispatch<SetStateAction<number>>;
}

export default function CounterButton({ value, 
    setCounter }: IProps) {
    const handleCounter = () => {
        setCounter((prev) => prev + value);
    };

    return (
        <button onClick={handleCounter}>
            {value === 1 ? "Increment" : "Decrement"}
        </button>
    );
}

Here we are destructuring the props. The props have to be of the type IProps to work without any errors. Setting the type of props helps in auto-completion and helps to avoid any bugs. If any prop has a mismatched type, the editor will show errors and the application will not work.

Steps to run the application: Run the application using the command given below

npm run dev
# or
yarn dev

Output:

2. Add TypeScript to an existing project:

Add TypeScript to Application: Follow the steps given below to add TypeScript to add to your existing project

Step 1: Create a tsconfig.json file: Each TypeScript project requires a tsconfig.json file that contains all the rules and configuration of TypeScript. Create the tsconfig.json file by entering the below command at the root directory of your Next.js project in your terminal.

touch tsconfig.json

By default, the tsconfig.json file is empty.

Step 2: Install dependencies: Write the below commands in the terminal to install all the dependencies:

npm install -D typescript @types/react @types/node
# or
yarn add --dev typescript @types/react @types/node

Step 3: Populate tsconfig.json: After installing all the dependencies, run the app using

npm run dev
# or 
yarn dev

It populates the tsconfig.json with basic rules and configurations. The configurations can be changed, based on the user's choice. Check this site to know more about tsconfig rules and configurations.

Note: Add the "moduleResolution" rule under the compilerOptions object as shown below, if it is absent from your tsconfig file.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",

    // Add the rule below
    "moduleResolution": "node",

    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Step 4: Rename the extensions of all the JavaScript files from .js to.ts. Change the extensions of all pages and components from .js/.jsx to .tsx.

Project Structure: Your project structure after following all the above steps should look like this:

Example: Consider the code snippet given below. The event for input change has a type "ChangeEvent<HTMLInputElement>" that helps in auto-completion of the code.

• pages/index.tsx

import { ChangeEvent, useState } from "react";

export default function Home() {
    const [input, setInput] = useState("");

    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
        setInput(e.target.value);
    };

    return (
        <div>
            <input type="text" value={input}
                onChange={handleChange} />
            <h2>{input}</h2>
        </div>
    );
}

Output:

In the output above, it can be seen that as we entered e. in the setInput() function in the handleChange() function, a dropdown of all the possible suggestions pops up. This is not possible in JavaScript files. But TypeScript provides easy development by suggesting auto-completions and indicating errors. Furthermore, it can be seen that as we have completed typing e.target, another dropdown pops up again showing the possible suggestions.