nextjs-crash-course-with-heroes

nextjs-crash-course-with-heroes copied to clipboard

Advanced Crash Course on Next.js with Programming Hero Community Members

Table of Contents

• Initial Setup
• Linting Setup
  • Install Dev Dependencies
  • Setup Linting Configuration file manually
  • Linting Shortcut Setup with bash script
• VS Code Editor Setup
  • Extensions
  • Settings
• Contact

Initial Setup

Please follow the below instructions to do initial setup:

1. Make sure you have the latest node.js installed in your machine.

2. install yarn

   npm i -g yarn
   

3. install nodemon

   yarn add nodemon
   

4. clone the repository

   git clone https://github.com/learnwithsumit/nextjs-crash-course-with-heroes.git
   

5. setup & start the dummy api server

   cd apiServer
   yarn # equivalent to npm install
   nodemon index.js
   

   api server will be running in port 5000 and can be accessed with http://localhost:5000. You will have 2 routes available in the server -

   1. /posts
   2. /posts/:id

6. setup & start the next js server

   cd ../next-intro #go one level up into the root directory and cd into next js project folder
   yarn
   npm run dev # start next.js project in development mode
   

   next js server will be running in port 3000 and can be accessed with http://localhost:3000. You will have 3 routes available in the server -

   1. /
   2. /posts/posts
   3. /posts/:id

Linting Setup

In order to lint and format your Next.js project automatically according to popular airbnb style guide, I recommend you to follow the instructions below.

Install Dev Dependencies

yarn add -D prettier
yarn add -D babel-eslint
npx install-peerdeps --dev eslint-config-airbnb
yarn add -D eslint-config-prettier eslint-plugin-prettier

Setup Linting Configuration file manually

Create a .eslintrc.json file in the project root and enter the below contents:

{
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "eslint:recommended",
    "prettier",
    "plugin:jsx-a11y/recommended"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 8
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest": true
  },
  "rules": {
    "react/react-in-jsx-scope": 0,
    "indent": 0,
    "linebreak-style": 0,
    "react-hooks/rules-of-hooks": "error",
    "no-console": 0,
    "react/state-in-constructor": 0,
    "react/prop-types": 0,
    "jsx-a11y/click-events-have-key-events": 0,
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 100,
        "tabWidth": 4,
        "semi": true
      }
    ]
  },
  "plugins": ["prettier", "react", "react-hooks"]
}

Linting Shortcut Setup with bash script

1. Windows users, make sure you have Git bash installed in your machine so that we can run bash scripts. Mac & Linux users do not need to install Git bash because it's already available there.

2. Windows users, edit this file '/C/Program Files/Git/etc/profile.d/aliases.sh'. Mac/Linux users need to edit this file '{$HOME}/.zshrc' file

3. If you want to add a shortcut for Next.js project linting with all the linting steps I described above, you can setup an alias in the above aliases.sh (windows) or .zshrc(Mac or Linux) file.

   alias lint-nextjs="exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/sumitsaha/linting/master/nextjs-eslint-prettier.sh 2> /dev/null)"
   

4. Now open your bash terminal and go to any Next.js project folder. For example in our case cd into the next-intro' folder and then enter the below command

    lint-nextjs
   

   This will pull necessary command from my repository and install into your machine accordingly. Enter 'y' to any prompt that you receive. You will see it will automatically do all the steps that I described into the above linting setup section.

VS Code Editor Setup

In order to follow along the tutorial series, I recommend you to use Visual Studio Code Editor and install & apply the below extensions and settings.

Extensions

Install the below extensions:

• ESLint
• Prettier

Settings

Go to your Visual Stuido Code settings.json file and add the below settings there:

// config related to code formatting
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
  "editor.formatOnSave": false,
  "editor.defaultFormatter": null
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": true
},
"eslint.alwaysShowStatus": true

Contact

Sumit Saha - [email protected]

Project Link: https://github.com/learnwithsumit/nextjs-crash-course-with-heroes

Youtube Channel: https://youtube.com/LearnwithSumit