DEV Community

Cover image for setup ts-reset with next.js (@total-typescript/ts-reset) with 3 simple steps
EHSAN.
EHSAN.

Posted on • Originally published at your-codes.vercel.app

setup ts-reset with next.js (@total-typescript/ts-reset) with 3 simple steps

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!

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

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? ... @/*
Enter fullscreen mode Exit fullscreen mode

Step-2: Add ts-reset package

pnpm add -D @total-typescript/ts-reset
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

And then you are all done.

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

Top comments (0)