How to add TypeScript to a NextJS project
Tags: typescript, nextjs, javascript
Published: 2023-03-09 17:59:43

> When I first took a deep dive of the TypeScript documentation it scared me.

I'm going to be honest when I first took a deep dive of the TypeScript documentation it scared me. From terms like types, interfaces and generics, it can be overwhelming to get started. This is where Nextjs comes in to save the day 🥰.

Adding TypeScript to your NextJS project super simple.

Let's get started!


## Step 1: Create ts.config.json file

Create a `ts.config.json` file in the root of your project.

Run this in your terminal/command line

```
touch tsconfig.json
```

## Step 2: Install TypeScript packages

Run these two commands in the terminal/command line

Install TypeScript globally

```
npm install -g typescript
```

Install TypeScript packages.

```
npm i typescript @types/react @types/node
```

or

```
yarn add typescript @types/react @types/node
```

## Step 3: Start or re-start the server

Let NextJS work it's magic.

Once you have installed all the TypeScript packages all you need to do is start or re-start the NextJS server and NextJS will populate our `tsconfig.json` file for us! 😮

Run this in your terminal/command line

```
npm run dev
```

or

```
yarn dev
```

Your `tsconfig.json` file should look like this:

```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "rootDir": "src",
    "typeRoots": ["src/types", "node_modules/@types"]
  },
  "include": ["next-env.d.ts", "twin.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
```

## Step 4: Switch file extensions

Now in any file you want to use TypeScript you have to switch the file extention from `.js` to `.ts` or `.tsx` if your using TypeScript with jsx.

For example, if you have a file called `index.js` you need to switch it to `index.ts` or `index.tsx` for use with jsx.

## Step 5 (Optional): Turn on strict mode

> If you are migrating a JavaScript codebase to TypeScript keep `"strict": false`

In order to enjoy the full benefits of type saftey were going to set the `strict` property to `true`in the `tsconfig.json` file.

Like so:

```json
"strict": true,
```

## What is strict mode?

The strict option in the TypeScript compiler turns on a set of type checking rules.

There are serveral options you can customize. Just replace the `strict` property:

```json
"strict": true
```

with this:

```json
{
 "noImplicitAny": true,
  "noImplicitThis": true,
  "alwaysStrict": true,
  "strictBindCallApply": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "strictPropertyInitialization": true,
}
```

---

Check out this great article by [Andy Li](https://dev.to/jsdev) that explains these options in detail.
["Strict Mode" TypeScript config options](https://dev.to/jsdev/strict-mode-typescript-j8p)

---

> ⚠️ WARNING: Do not turn on strict mode if you're migrating a JavaScript codebase to TypeScript. It creates a flood of type errors. If you are migrating JavaScript to TypeScript keep `"strict": false`.

---

### DONE! 🎉 🎉 Now your all set to use TypeScript in your NextJS project!

---

### Resources:

- [Learn more about strict mode in TypeScript](https://www.typescriptlang.org/tsconfig#strict)

- [Learn more about NextJS](https://nextjs.org/)

---

### **Subscribe to my newsletter where you will get tips, tricks and challenges to keep your skills sharp. [Subscribe to newsletter](https://prodigious-innovator-1238.ck.page/25e4b3fdce)**

---

<a href="https://www.buymeacoffee.com/Bobbyhalljr" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/arial-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important; margin-top: 2rem !important;" ></a>