Next.js Notes

Configuring eslint for Next.js projects

1. Install ESLint

   npm i eslint babel-eslint --save-dev

   or, with Yarn

   yarn add eslint babel-eslint -D

2. Install ESLint plugin

   npx install-peerdeps --dev eslint-config-airbnb

   • This installs peerdependencies bundled together, namely executing this command:

   npm i -D eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks

   or, with Yarn

   yarn add -D eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks

3. Install prettier plugin (optional, so that prettier doesn't mess up with linting)

   npm i eslint-config-prettier eslint-plugin-prettier --save-dev

   or, with Yarn

   yarn add eslint-config-prettier eslint-plugin-prettier -D

4. Dev dependencies should now look similar to this:

   {
     "devDependencies": {
       "babel-eslint": "^10.1.0",
       "eslint": "^6.8.0",
       "eslint-config-airbnb": "^18.1.0",
       "eslint-config-prettier": "^6.11.0",
       "eslint-plugin-import": "^2.20.2",
       "eslint-plugin-jsx-a11y": "^6.2.3",
       "eslint-plugin-prettier": "^3.1.3",
       "eslint-plugin-react": "^7.20.0",
       "eslint-plugin-react-hooks": "^2.5.1"
     }
   }

5. Create a .eslintrc file with this configuration:

   {
     "env": {
       "browser": true,
       "commonjs": true,
       "es6": true,
       "node": true
     },
     "parser": "babel-eslint",
     "extends": [
       "eslint:recommended",
       "airbnb",
       "airbnb/hooks",
       "plugin:react/recommended",
       "plugin:import/errors",
       "plugin:import/warnings",
       "plugin:jsx-a11y/recommended",
       // "plugin:react-hooks/recommended",
       // always put prettier at last
       // Delete if prettier plugin not installed in step 3
       "prettier"
     ],
     "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
     },
     "parserOptions": {
       "ecmaFeatures": {
         "jsx": true // enable linting for jsx files
       },
       "ecmaVersion": 11,
       "sourceType": "module"
     },
     "settings": {
       "react": {
         "version": "detect"
       }
     },
     "plugins": ["react", "react-hooks"],
     "rules": {
       // NextJs specific fix: suppress errors for missing 'import React' in files for nextjs
       "react/react-in-jsx-scope": "off",
      // NextJs specific fix: allow jsx syntax in js files
       "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
       "react/display-name": 1
     }
   }

6. To disable linting of some files/folders, create a .eslintignore

   # don't ever lint node_modules
   node_modules
   # don't lint build output (make sure it's set to your correct build folder name)
   dist
   # don't lint nyc coverage output
   coverage

7. Finally, eventually add linting to scripts in package.json as a part of the build/deploy process

   {
      "scripts": {
          "lint": "eslint ./components/** ./pages/** -c .eslintrc.json --ext js,jsx",
          "lint-fix": "eslint ./components/** ./pages/** -c .eslintrc.json --fix --ext js,jsx",
      }
   }

This taken from This Stack Overflow Answer

The trick to use Next.js Link with react-bootstraps Nav.Link

Next.js has its Link component which helps to build dynamic links. React Bootstrap has ist Nav.Link component to build nice navigation links.

Combining both is not so straight forward. One of each would always complain about things like

“You are using a string directly in a Link!”

There is a way to combine both:

const Header = props => {
    return (
        <Navbar>
            <Link href="/my-page" passHref>
              <Nav.Link>
                 My Page
              </Nav.Link>
            </Link>
        </Navbar>
    )
}

Note the attribute passref that gets passed onto the <Link> component. It makes unnecessary to pass as='a' href='/my-page' to the child element! See this for more information.

Next.js Contact Form

• Tutorial
• Repository

Next.js Multistep Form

• Tutorial
• Repository