Please follow the below instructions to do initial setup:
-
Make sure you have the latest node.js installed in your machine.
-
install yarn
npm i -g yarn
-
install nodemon
yarn add nodemon
-
clone the repository
git clone https://github.com/learnwithsumit/nextjs-crash-course-with-heroes.git
-
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 -
- /posts
- /posts/:id
-
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 -
- /
- /posts/posts
- /posts/:id
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.
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
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"]
}
-
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.
-
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
-
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)"
-
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.
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.
Install the below extensions:
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
Sumit Saha - [email protected]
Project Link: https://github.com/learnwithsumit/nextjs-crash-course-with-heroes
Youtube Channel: https://youtube.com/LearnwithSumit