Overview

The NextJS starter project will help developers quickly stand-up a website using NextJS and supporting technologies. The following documentation will guide you through the setup of NextJS and other technologies such as:

Base
- NextJS
- TypeScript
UI
- MaterialUI
Data
- Mobx
- useSwr
Code Quality
- ESLint
- Prettier
- Husky
- Jest

-Deployment

server.js (assuming a deployment to Linux-based Azure Web App)

Additional features in this documentation:

Theming with Material UI
Paging system in NextJS
Fetching data from a local API using SWR
Storing data in memory using mobx

Pre-requisites

VS Code https://code.visualstudio.com/Download
Node https://nodejs.org/en/download/

Setup

Open package.json to see the following script:

Scripts

"scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "npm run build && node server.js",
        "lint": "eslint . --ext ts --ext tsx --ext js",
        "prepare": "husky install",
        "format": "prettier --write .",
        "type-check": "tsc --pretty --noEmit"
    }

These scripts refer to the different stages of developing an application:

dev - Runs next dev which starts Next.js in development mode
build - Runs next build which builds the application for production usage
start - Runs build and then for starts production server
lint - Runs lint which sets up Next.js' with custom built ESLint configuration
prepare - Runs the prepare lifecycle before running the package to install the husky
format - Runs command to formats all file supported by Prettier in the current directory and its subdirectories.

Pages

Next.js is built around the concept of pages. A page is a React Component exported from the .ts, or .tsx file in the pages directory.

Under the src folder you will find the pages. These pages are associated with a route based on their file name. For example pages/todo.tsx is mapped to /todo.

ESlint configuration

You will find the configuration file .eslintrc.json in the directory .

"parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"
    ],
    "env": {
        "es6": true,
        "browser": true,
        "jest": true,
        "node": true
    },

    "rules": {
}

Here are some of the options that you can configure in ESLint:

Environments - which environments your script is designed to run in. Here we see the env parameter that supports the required environments.
Rules - Rules set the parameters that are followed by the company and at the required error level.
Plugins - which third-party plugins define additional rules. environments etc. for ESLint to use.

Refer for more information to https://eslint.org/docs/user-guide/configuring/

Other recommendations

Next-Js - https://nextjs.org/docs/getting-started
Prettier configuration - https://prettier.io/docs/en/configuration.html
Husky blog - https://www.freecodecamp.org/news/how-to-add-commit-hooks-to-git-with-husky-to-automate-code-tasks/
A 2021 guide about structuring your Next.js project in a flexible and efficient way

CaravelLabs / nextjs-starter