Next.js, Typescript and ESLint Starter Configuration.

This blog post will take you through configuring a new Next.js project, ready to go with Typescript, ESlint and pre-commit checking with Husky. This is one way of ensuring all the code you're pushing is production ready. You can research any of these tools individually to find out exactly what we're doing, this post will focus on getting you setup and started with your project as quickly as possible.

Start a fresh Next.js application.

npx create-next-app "Your project name here"

Add types to the Next.js application and rename the .js files in your app.

npm i typescript @types/react @types/node

Setup your App.tsx

import type { AppProps /*, AppContext */ } from 'next/app';

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default MyApp;

Install ESLint and Prettier dev dependencies

npm i -D --dev eslint @typescript-eslint/parser  @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y prettier eslint-plugin-prettier eslint-config-prettier  eslint-plugin-simple-import-sort husky

Create an eslintrc.js file.

module.exports = {
  root: true,
  env: {
    browser: true,
    amd: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  settings: {
    react: {
      version: "detect",
    },
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended",
  ],
  plugins: ["simple-import-sort"],
  rules: {
    "prettier/prettier": ["error", {}, { usePrettierrc: true }],
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "@typescript-eslint/no-unused-vars": ["error"],
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "react/no-unescaped-entities": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-namespace": "off",
  },
  overrides: [
    {
      files: ["**/*.ts", "**/*.tsx"],
      parser: "@typescript-eslint/parser",
    },
  ],
};

Create a .prettierrc file.

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": false,
  "trailingComma": "all",
  "jsxBracketSameLine": true,
  "endOfLine": "auto"
}

Ensure you are fixing ESLint issues on editor save. ctrl + shift + p or cmd + shift + p to pull up your settings. Check these match.

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

We already installed Husky as a dev dependency, so lets initialise it.

npx husky init

This will create a pre-commit hook inside of the .husky folder. Remove this pre-commit example.

Update package.json with the following scripts.

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc --project tsconfig.json --pretty --noEmit",
    "lint": "eslint --ext js,jsx,ts,tsx --fix .",
  },

Add the pre-commit hook to Husky using our scripts.

npx husky add .husky/pre-commit "npm run type-check && npm run lint ."

You're now good to go. If you followed all the steps correctly you will have an awesome setup for working in a Next.js project.