Front-endNext.js

Create new project with Next.js

  1. Packages and plug-ins to be installed in the project

    1. next.js
    2. engine locking
    3. eslint
    4. prettier
    5. lint-staged
    6. vs config
    7. testing (jest, cypress)
    8. git hooks (husky)
    9. conventional commit
    10. UI (chakra ui)
    11. tailwind
    12. daisyUI
    13. redux tool kit
    14. storybook

  2. Next.js

    It’s in the official documentation. npx create-next-app@latest Then just keep selecting the default option.

    Next.js contains many settings, such as ESlint and jest related content (written in the document).

    When asked for the name, enter . to create the project in the current folder.


  3. Engine locking

    In the Next.js project configuration, engine locking is an option that controls whether Next.js should lock the version of the Node.js engine used.

    When the engine locking option is enabled, Next.js will lock on the Node.js engine version used in the project, which ensures that the same Node.js version is used when building and running the application. This can help avoid issues caused by differences between different versions of the Node.js engine, making applications more stable and reliable.

    In Next.js’s project configuration, “engine locking” is an option that controls whether Next.js should lock the version of the Node.js engine used.

    Specifically, when the engine locking option is enabled, Next.js will lock on the Node.js engine version used in the project, which ensures that the same Node.js version is used when building and running the application. This can help avoid issues caused by differences between different versions of the Node.js engine, making applications more stable and reliable.

    Engine locking is inside webpack. Documentation can be found in npm docs under engines.

    In the project, you can add the code after the script in package.json:

    1
    2
    3
    4
    5
    6
    "engineStrict": true,
      "engines": {
        "node": ">=14.0.0",
        "npm": ">=8.0.0",
        "yarn": "please-use-npm" //It is forbidden to use yarn
      },

  4. eslint

    ESLint can be found in the Next.js documentation. If you use Next.js, it is already installed. eslint has also been set in the script of package.json.

    The difference between lint and prettier is that prettier beautifies the code, while lint makes the code comply with the rules.

    The lint config file is in .eslintrc.json. After installing prettier, you need to write new rules here.


  5. prettier

    It can be found in Next.js documentation.

    1
    2
    npm install --save-dev --save-exact prettier
    npm install --save-dev eslint-config-prettier

    After installation, add the following code in .eslintrc.json. Note that there is an order of addition, and it needs to be added after "next/core-web-vitals".

    1
    2
    { "extends": ["next", "prettier"] } //Added content
    { "extends": ["next/core-web-vitals", "next", "prettier"] } //After adding

    After that, add a comment to the scripts in package.json:

    1
    "prettier": "prettier --write ."

    Then run npm run prettier to automatically beautify the code. The actual instruction executed here is npm run prettier --write ..


  6. lint-staged

    Sometimes I want to upload code, but not all files comply with lint. If lint-staged is not installed, all files must meet the requirements of lint. If lint-staged is present, only staged files need to meet lint requirements. That is, in addition to the changes in commit, there is one more staged changes.

    1
    npm install --save-dev lint-staged

  7. vsconfig

    The file should be created in the .vscode folder in the root directory and named settings.json.

    You can set part of it in the preference-setting of vscode app. For example, change Files: Auto Save to afterDelay.

    Can be set in settings.json:

    1
    2
    3
    4
    {
        "editor.formatOnSave": true, //Automatically format code when saving a file
        "default.defaultFormatter": "esbenp.prettier-vscode"
    }

    At this time, prettier will be used to automatically adjust the format when the entire project is saved.

    I tried it and found that I can’t automatically use prettier to change the format when I write it this way. But when I delete the line “editor.defaultFormatter”: “esbenp.prettier-vscode”, I can automatically use prettier to change the format. What could be the reason for this?

    This issue may be caused by a conflict between VS Code’s default formatter and the Prettier plugin. The “editor.defaultFormatter” setting specifies the default formatter, but if another formatter (such as the VS Code default formatter) is registered earlier than Prettier, then it will be used to format the code instead of Prettier. .


  8. Testing

    Next.js has a lot of testing integrated into it. So just click Document to install it. If you use react instead of next, you need to set up a lot more settings.

    1. Jest

      Install Jest:

      1
      npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

      Then follow the document, create the jest.config.js file in the directory, and paste the content in the document.

      This document also contains content such as Handling stylesheets and image imports under testing.

      Then add the command to scripts in package.json:

      1
      "test": "jest --watch"

      Create test file: According to the documentation, create the file in the root directory: __tests__/index.test.jsx.

      Cover rate and the like need to be set in the jest.config.js file. See the jest documentation.


    2. Cypress

      Install Cypress

      1
      npm install --save-dev cypress

      Then add in package.json scripts:

      1
      "cypress": "cypress open"

      There is also how to write cypress in the documentation.


  9. git hooks (husky) and conventional commit

    1. conventional commit

      Conventional commit is so that the commit must meet certain rules, such as fix(server): send cors headers. Install:

      1
      npm install --save-dev @commitlint/config-conventional @commitlint/cli

      Then use the commands in the documentation to create the commitlint.config.js file:

      1
      echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

      Note: The file created in this way is not in utf-8 format, and an error will always be reported when using husky pre-commit. You need to create one with an empty notepad, write the statement and save it as a file in utf-8 format.


    2. git hooks (husky)

      Git hook (husky) is a Git client hook tool that allows developers to execute some custom scripts before or after Git events occur. By using Git hooks, code specification checking, unit testing, code packaging, automatic deployment and other operations can be completed automatically, improving development efficiency and reducing errors.

      Common Git hooks include pre-commit, post-commit, pre-push, etc. Among them, pre-commit is executed before the code is submitted and can be used to check code style, run unit tests and other operations; post-commit is executed after the code is submitted and can be used to update documents, send emails and other operations; pre-push is Executed before code push, it can be used to check code quality, run end-to-end tests, etc.

      Install and activate. After activation, the .husky folder will appear:

      1
      2
      npm install husky --save-dev
      npx husky install

      Then follow the documentation to add a hook, and in Husky’s own documentation, find and install another Hook:

      1
      2
      npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
      npx husky add .husky/pre-commit "npm test"

      Since there is no need to let it run for the time being, use # to comment out npm test in the pre-commit file in .husky:

      1
      2
      3
      #!/usr/bin/env sh
      . "$(dirname -- "$0")/_/husky.sh"
      # npm test

      At this time, if the text does not comply with the rules during commit, husky will prompt an error.

      Finally, set the pre-commit check item. First add in scripts in package.json:

      1
      "pre-commit": "npm run prettier && npm run lint && npm run test"

      At this time, you may need to change the original "test": "jest --watch" to "test": "jest".

      Then write in the .husky/pre-commit file

      1
      npm run pre-commit

      If there is a problem with husky and it is stuck and cannot be submitted, you should use git commit --no-verify -m "xxx" to temporarily block husky.


  1. Tailwind

    Follow documentation to install tailwind. Here -D and -dev are the same.

    1
    2
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

    Then follow the documentation to replace the content in the tailwind.config.js file with: (The following may not be the latest, please refer to the documentation)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./app/**/*.{js,ts,jsx,tsx}",
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",

        // Or if using `src` directory:
        "./src/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {}, //The content of design system is written here. Documentation: https://tailwindcss.com/docs/theme
      },
      plugins: [],
    }

    Then delete the contents of the globals.css file and replace it with:

    1
    2
    3
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    Then set tailwind Automatic IntelliSense in the .vscode/settings.json file (requires the Tailwind CSS IntelliSense plug-in to be installed):

    1
    2
    3
    4
    5
    6
    "editor.quickSuggestions": {
        "strings": true
    },
    "tailwindCSS.experimental.classRegex": [
        "([\"'])(?:tw|tw-s|tw-state)\\(([^)]+)\\1"
    ]

  1. daisyUI

    daisyUI is a plug-in for tailwind. Install:

    1
    npm i daisyui

    Then add daisyui in the tailwind.config.js file.

    1
    2
    3
    4
    module.exports = {
      //...
      plugins: [require("daisyui")],
    }

  2. Redux-toolkit

    Install according to Documentation.

    1
    2
    npm install @reduxjs/toolkit
    npm install react-redux

    According to document, you need to install it in store/store.ts (the document says app/store.js):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { configureStore } from '@reduxjs/toolkit'
        
    export const store = configureStore({
      reducer: {},
    })
        
    // Infer the `RootState` and `AppDispatch` types from the store itself
    export type RootState = ReturnType<typeof store.getState>
    // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
    export type AppDispatch = typeof store.dispatch

    Finally, install the provider in _app.tsx under the pages folder (if there is a UI package outside the component, the provider must be outside the UI):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { store } from '../store/store'; //provider related
    import { Provider } from 'react-redux'; //provider related
        
    export default function App({ Component, pageProps }: AppProps) {
      return (
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      )
    }

  3. Storybook

    There are a lot of configurations required to use storybook and tailwind together, please refer to Document, Video.


  4. Other settings

    There are also some other settings for cc-app later in the video. Among the more useful ones are:

    .eslintignore

    Some officially recommended plugins in .eslintrc and some tips in rules.

    .prettierignore

    Set prettier rules in .prettierrc

    …


Share