Setting up Next.js 13 with TypeScript-ESLint

Step 1: Create a new Next.js project with TypeScript

To create a new Next.js project with TypeScript, run the following command:

npx create-next-app@latest --ts my-app

Note that my-app is the name of the project folder, and you can replace it with any name you prefer.

During the creation process, you will be asked several questions. Here are the recommended answers:

Would you like to use ESLint with this project? -> Yes
Which ESLint configuration would you like to use? -> Next.js (uses eslint-config-next)
Would you like to use Tailwind CSS? -> No
Would you like to use the src directory? -> No
Would you like to use the experimental app directory? -> Yes
What would you like to name the import alias? -> @/*

This command will create a new Next.js project with TypeScript and the recommended configuration.

Step 2: Install TypeScript-ESLint as a dev dependency

TypeScript-ESLint is a tool that integrates ESLint with TypeScript. To install it as a dev dependency, run the following command:

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

This will install two packages: @typescript-eslint/parser, which allows ESLint to understand TypeScript syntax, and @typescript-eslint/eslint-plugin, which provides additional TypeScript-specific ESLint rules.

Step 3: Configure ESLint for TypeScript

ESLint uses a configuration file (.eslintrc.json) to define the rules and plugins that should be used. Open this file and add the following configuration:

{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "root": true
}

Step 4: Test the integration

To test the integration, open pages/index.tsx and add the following code:

type Test = {};

This code defines a new type called Test. If you save the file, you should see an error message in your editor, indicating that the code is not valid:

Don't use `{}` as a type. `{}` actually means "any non-nullish value".
- If you want a type meaning "any object", you probably want `object` instead.
- If you want a type meaning "any value", you probably want `unknown` instead.
- If you want a type meaning "empty object", you probably want `Record<string, never>` instead.

This error message confirms that TypeScript-ESLint is working correctly and is providing helpful feedback on your code.

Congratulations! You have successfully integrated TypeScript-ESLint in Next.js. From now on, ESLint will check your TypeScript code and provide suggestions to improve its quality