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:
{
"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 truein the tsconfig.json file.
Like so:
"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:
"strict": true
with this:
{
"noImplicitAny": true,
"noImplicitThis": true,
"alwaysStrict": true,
"strictBindCallApply": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
}
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
Top comments (0)