Next server render project setup

Before we start building projects, what is Next?

Next introduction

Next. Js gives you everything you need in a production environment and the best development experience: static and server-side convergent rendering, TypeScript support, intelligent packaging, route prefetch, and no configuration at all.

English: nextjs.org/ Chinese: www.nextjs.cn/

In the official document, all the advantages of Next are introduced in detail. Students who are interested in Next can click to read by themselves. There is no further exposition here.

I believe that by reading the official document, you will be confused by a few terms:

1. CSR: Client Side Rendering, usually a browser
2. SSR: Server Side Rendering, Server Side Rendering
3. SSG: Static Site Generation: generates Static websites
4. ISR: Incremental Site Rendering, Incremental website Rendering
5. DPR: Distributed Persistent Rendering

SSR server rendering

However, it is a pity that server-side rendering can solve SEO, first screen rendering time and other problems caused by CSR single page application (SPA). It can directly render the page seen by users in real-time and isomorphic rendering on the server, which can improve user experience to the greatest extent.

Its advantages:

1. Try not to occupy the front end of the resources, the front end of the time is less, fast.
2. It’s good for SEO optimization, because you have a full HTML page on the back end, so it’s easier for crawlers to crawl information.

Its disadvantages:

1. It is not conducive to the separation of the front end and the efficiency of development is reduced.
2. The parsing of HTML is faster for the front end, but puts more strain on the server.

Reference data: www.mybj123.com/13984.html zhuanlan.zhihu.com/p/365113639 zhuanlan.zhihu.com/p/47044039

npx create-next-app@latest --typescript
Copy the code

addPrettier

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
Copy the code

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript
Copy the code

{
  "env": {
    "browser": true."es2021": true
  },
  "plugins": ["@typescript-eslint"]."extends": [
    "plugin:@typescript-eslint/recommended"."next"."next/core-web-vitals"."prettier"]."parser": "@typescript-eslint/parser"."parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12."sourceType": "module"
  },
  "rules": {
    "@typescript-eslint/no-unused-vars": "off"."@typescript-eslint/no-explicit-any": "off"."@typescript-eslint/no-non-null-assertion": "off"."@typescript-eslint/consistent-type-imports": "warn"."@typescript-eslint/no-var-requires": "off"."import/no-anonymous-default-export": [
      "error",
      {
        "allowArray": false."allowArrowFunction": true."allowAnonymousClass": false."allowAnonymousFunction": false."allowCallExpression": true."allowLiteral": false."allowObject": false}}}]Copy the code

Example Add rule Prettier

{
  "semi": false."trailingComma": "es5"."useTabs": false."rintWidth": 80."singleQuote": true."tabWidth": 2
}
Copy the code

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Copy the code

npx tailwindcss init -p This will generate tailwind.config.js and postcss.config.js configuration files
Copy the code

module.exports = {
  mode: 'jit',
  content: [
    './pages/**/*.{js,ts,jsx,tsx}'.'./components/**/*.{js,ts,jsx,tsx}'.'./layout/**/*.{js,ts,jsx,tsx}'.'./lib/**/*.{js,ts,jsx,tsx}'.'./utils/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Copy the code

@tailwind base;
@tailwind components;
@tailwind utilities;
Copy the code

Adding a Path Alias

{
  "compilerOptions": {
    "target": "es5"."lib": ["dom"."dom.iterable"."esnext"]."allowJs": true."skipLibCheck": true."strict": true."forceConsistentCasingInFileNames": true."noEmit": true."esModuleInterop": true."module": "esnext"."moduleResolution": "node"."resolveJsonModule": true."isolatedModules": true."jsx": "preserve"."incremental": true.// Base path
    "baseUrl": ".".// Add an alias and use @Components in your project
    "paths": {
      "@components/*": ["components/*"]."@utils/*": ["utils/*"]."@lib/*": ["lib/*"]."@styles/*": ["styles/*"]}},"include": [
    "types/process.d.ts"."next-env.d.ts"."types/next-auth.d.ts"."**/*.ts"."**/*.tsx"]."exclude": ["node_modules"]}Copy the code

npm install --save-dev stylelint stylelint-config-standard 
Copy the code

module.exports = {
	extends: 'stylelint-config-standard'.rules: {},}Copy the code

Add less

npm i next-with-less less less-loader
Copy the code

Modify the configuration in next-config.js:

const withLess = require('next-with-less')

module.exports = withLess({
  reactStrictMode: true.lessLoaderOptions: {},})Copy the code

npm install antd
Copy the code

@import "~antd/dist/antd.less";

@primary-color: #f74a49;

@link-color: #1890ff;

@success-color: #52c41a;

@warning-color: #faad14;

@error-color: #f5222d;

@font-size-base: 14px;

@heading-color: rgba(0.0.0.0.85);

@text-color: rgba(0.0.0.0.65);

@text-color-secondary: rgba(0.0.0.0.45);

@disabled-color: rgba(0.0.0.0.25);

@border-radius-base: 2px;

@border-color-base: #d9d9d9;

@box-shadow-base: 0 3px 6px -4px rgba(0.0.0.0.12),
  0 6px 16px 0 rgba(0.0.0.0.08), 0 9px 28px 8px rgba(0.0.0.0.05);

Copy the code

import '@styles/globals.css' // Note that the tailwind Base initialization file is introduced here, so it cannot be introduced after ANTD, otherwise the STYLES of the ANTD component library will be cleared
import '@styles/antd.less'

function MyApp({ Component, pageProps }) {
  return <Component {. pageProps} / >;
}

export default MyApp;
Copy the code

// type/global.d.ts

declare module '*.module.css' {
  const classes: { readonly [key: string] :string }
  export default classes
}

declare module '*.module.less' {
  const classes: { readonly [key: string] :string }
  export default classes
}

Copy the code

Add code specifications such as Husky

npm i lint-staged husky -save-dev
Copy the code

After successful installation, execute the following command to start Husky:

npm set-script prepare "husky install"
npm run prepare
Copy the code

Next, install the hook:

npx husky add .husky/pre-commit "npx lint-staged"
Copy the code

Add lint-staged configuration files to the root directory:

module.exports = {
  '**/*.(ts|tsx)': () = > 'npx tsc --noEmit'.'**/*.(ts|tsx|js)': (filenames) = > [
    `npx eslint --fix ${filenames.join(' ')}`.`npx prettier --write ${filenames.join(' ')}`,].'**/*.(md|json)': (filenames) = >
    `npx prettier --write ${filenames.join(' ')}`.'**/*.(less)': (filenames) = >
    `npx stylelint ${filenames.join(' ')} --custom-syntax postcss-less`,}Copy the code

Install commitlint

# Install commitLint CLI and general configuration
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# this command creates the commitlint configuration file in the root directory
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
Copy the code

Next, install the Husky hook:

npx husky add .husky/commit-msg "npx --no -- commitlint --edit The $1"
Copy the code

Use:

git add .
git commit -m "Feat: Project Infrastructure"
Copy the code

You can see that the hook is triggered.

The final complete project structure is as follows:

Because the article was written after the project was built, there are some files in the directory structure that will need to be covered in the next article. The next article will take you through the next-Auth library and show you how to gracefully implement permission control issues in the Next project.

If you like this article please give me a thumbs up 👍 thank you 🙏