DEV Community

Bobby Hall Jr
Bobby Hall Jr

Posted on • Edited on

How to add TypeScript to a NextJS project

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


Enter fullscreen mode Exit fullscreen mode

Step 2: Install TypeScript packages

Run these two commands in the terminal/command line

Install TypeScript globally



npm install -g typescript


Enter fullscreen mode Exit fullscreen mode

Install TypeScript packages.



npm i typescript @types/react @types/node


Enter fullscreen mode Exit fullscreen mode

or



yarn add typescript @types/react @types/node


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

or



yarn dev


Enter fullscreen mode Exit fullscreen mode

Your tsconfig.json file should look like this:



{
  "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"]
}


Enter fullscreen mode Exit fullscreen mode

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 truein the tsconfig.json file.

Like so:



"strict": true,


Enter fullscreen mode Exit fullscreen mode

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:



"strict": true


Enter fullscreen mode Exit fullscreen mode

with this:



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


Enter fullscreen mode Exit fullscreen mode

Check out this great article by Andy Li that explains these options in detail.
"Strict Mode" TypeScript config options


⚠️ 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:


Subscribe to my newsletter where you will get tips, tricks and challenges to keep your skills sharp. Subscribe to newsletter


Buy Me A Coffee

Top comments (1)

Collapse
 
imrvon profile image
Vincent Obioma Nwosu

Minor typo. It's tsconfig.json not ts.config.json