A nice little guide for how to set up Next JS with some of my favorite features.

Next_JS_Setup.md

Initial setup

1. Set up a new Next JS app with TypeScript (docs):

   yarn create next-app --typescript
   

VS Code Settings

Copy and paste these settings into the project's .vscode directory:

extensions.json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "gruntfuggly.todo-tree",
    "ecmel.vscode-html-css",
    "eamodio.gitlens",
    "analytic-signal.preview-mp4",
    "josefbiehler.cypress-fixture-intellisense",
    "tnrich.vscode-extension-open-cypress",
    "jock.svg"
  ]
}

launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Brave",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "runtimeExecutable": "C:/Program Files/BraveSoftware/Brave-Browser/Application/brave.exe"
    }
  ]
}

settings.json

{
  "eslint.packageManager": "yarn",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "npm.packageManager": "yarn",
  "typescript.tsdk": "node_modules\\typescript\\lib",
  "npm.enableRunFromFolder": true,
  "[svg]": {
    "editor.defaultFormatter": "jock.svg"
  }
}

Install Sass

1. Install Sass (Next docs):

   yarn add sass
   

Better TypeScript support for CSS modules

This enables autocomplete for CSS/SCSS/Sass modules.

1. Install the plugin:

   yarn add typescript-plugin-css-modules -D
   

2. Add the plugin to tsconfig.json:

   {
     "compilerOptions": {
       "plugins": [{ "name": "typescript-plugin-css-modules" }]
     }
   }

Install and configure Prettier

1. Install Prettier:

   yarn add --exact prettier -D
   

2. Create a new configuration file named .prettierrc.json and put this in it:

   {
     "singleQuote": true,
     "jsxSingleQuote": true,
     "semi": false
   }
   

3. Create a new file named .prettierignore and copy the contents of .gitignore over to it.

4. Add a new script to package.json:

   "format": "prettier --write ."

5. Execute the script with yarn format

ES Lint Setup

1. Execute yarn lint. This should set up a .eslintrc.json file if it's not already there.

2. Add the following to .prettierignore and .gitignore

   # ES Lint
   .eslintcache
   

Configure ES Lint and Prettier to work together

1. Install the Prettier config for ES Lint:

   yarn add eslint-config-prettier -D
   

2. Add the Prettier configuration to .eslintrc.json:

   {
      "extends": ["next/core-web-vitals", "prettier"]
   }

Lint-Staged setup

1. Run the following (docs):

   npx mrm@2 lint-staged
   

2. Running the previous command adds a log file named 6 in the project's root directory. Delete it.

3. Replace the default lint-staged settings in package.json with this:

   "lint-staged": {
     "*.{md,html,css,scss}": "prettier --write",
     "*.{js,jsx,ts,tsx}": [
       "prettier --write",
       "eslint --cache"
     ]
   }

Cypress Setup

1. Install Cypress (docs):

   yarn add cypress -D
   

2. Add the following to your .gitignore and .prettierignore files:

   # Cypress
   /cypress/videos
   /cypress/screenshots
   /cypress/downloads
   

3. Launch Cypress:

   yarn run cypress open
   

4. In the Cypress application, choose the option to delete all the example files. Close the application.

5. Add the following to cypress.json:

   {
     "$schema": "https://raw.githubusercontent.com/cypress-io/cypress/develop/cli/schema/cypress.schema.json",
     "baseUrl": "http://localhost:3000"
   }

6. In the cypress/support directory, convert the *.js files to *.tsfiles.

7. Sometimes you will need to add custom Cypress commands. The types for these custom commands go in a file named cypress/cypressCustomTypes.d.ts. Create that file and put this in it:

   declare namespace Cypress {
     interface Chainable<Subject = any> {
       getInputByLabel(value: string): Chainable<Subject>
     }
   }

8. Add the following to cypress/support/commands.js:

   Cypress.Commands.add('getInputByLabel', (label: string) => {
     return cy
       .contains('label', label)
       .invoke('attr', 'for')
       .then((id) => {
         cy.get('#' + id)
       })
   })
   
   export {}

9. Create a new cypress/tsconfig.json file and put this in it:

   {
     "extends": "../tsconfig.json",
     "compilerOptions": {
       "types": ["cypress"]
     },
     "include": [
       "../next-env.d.ts",
       "cypressCustomTypes.d.ts",
       "**/*.ts",
       "**/*.tsx"
     ]
   }

10. By default, Next will use the root directory tsconfig.json for type checking when it builds. This causes a problem because it will type check the cypress/ directory, and it is unaware of the cypress types. As a workaround, create another file in the root directory named tsconfig.build.json and put this in it:

    {
      "extends": "./tsconfig.json",
      "exclude": [
        "node_modules",
        "cypress"
      ]
    }

11. Then, tell Next to use the tsconfig.build.json file when it builds the site in next.config.js:

    module.exports = {
      typescript: {
        // The build process has its own tsconfig.json, which ignores the cypress directory.
        tsconfigPath: './tsconfig.build.json',
      },
    }