Learn how to setup ts-reset with next.js (@total-typescript/ts-reset)

ts-reset is a free tool that improves TypeScript's default type definitions. It makes them stricter, more consistent, and easier to use. By using ts-reset, you can prevent bugs related to type errors and make your code easier to read and maintain. It's similar to how css-reset standardizes styles across different browsers. ts-reset was created by Matt Pocock, who also developed Total TypeScript, a series of workshops designed to help you become highly skilled in TypeScript. If you want to master TypeScript, these workshops are highly recommended!

There are Three simple steps to implement ts-reset in the next.js app directory.

Step-1: initialize Next.js app

$ pnpm create next-app
.../Local/pnpm/store/v3/tmp/dlx-5180     |   +1 +
.../Local/pnpm/store/v3/tmp/dlx-5180     | Progress: resolved 1, reused 0, downloaded 1, added 1, done
√ What is your project named? ... .
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
√ What import alias would you like configured? ... @/*

Step-2: Add ts-reset package

pnpm add -D @total-typescript/ts-reset

Step-3: Add reset.d.ts

create a reset.d.ts file in the root of the root of the workspace and then add this single line on it.

This is important to add only this single line in reset.d.ts file.

import "@total-typescript/ts-reset";

And then you are all done.

🙌 Here's the GitHub repo of with sample source code 🌟