Next.js, Typescript and ESLint Starter Configuration

2021-03-21
Blog PostNext.js

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.

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

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

bash
npm i typescript @types/react @types/node

Setup your App.tsx

javascript
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

bash
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.

javascript
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.

javascript
{
  "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.

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

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

bash
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.

json
"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.

bash
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.

Back to blog