三步快速上手Nextjs开发规范

青旅半醒 2023-07-19 05:53 29阅读 0赞

*  ## 前言 ##

最近加入了梦寐以求的前端团队，主要的技术栈是TypeScript+React+Next+Mobx。然而，对于菜鸡的我之前做小项目，很少会选用到这么复杂的技术栈。以下都是大佬们给我代码Review的总结，请各位看官多多指点。

*  ## 安装 ##

**Next.js** 是一个轻量级的 React 服务端渲染应用框架。很多领先的公司都在使用。

Next,js提供了安装脚手架，直接一条命令直接安装。

npm init next-app
    # or
    yarn create next-app

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlbm55U2hpMTk5OA_size_16_color_FFFFFF_t_70][] #

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlbm55U2hpMTk5OA_size_16_color_FFFFFF_t_70 1][] #

安装完成后会提示操作命令。

*  ## 页面路由 ##

Next.js默认是通过文件系统路由的（*file-system routing*）。

新建一个pages文件夹，里面每一个文件夹就是一个路由。

例如将./pages/index.tsx放到项目中，这就是网站的首页

export default () => <div>Welcome to next.js!</div>

在./pages/a/index.js，则是路由/a

*  ## 第一步 组件&&组件编写规范 ##

###      能拆分一定要拆分，最理想情况是一个DIV一个组件 ###

能拆分一定要拆分，最理想情况是一个DIV一个组件

否则陷入嵌套地狱的时候就后悔莫及，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlbm55U2hpMTk5OA_size_16_color_FFFFFF_t_70 2][]

组件编写和原来的React一样。但是讲究编写规范，要将能拆分的都拆分，做到高内聚低耦合。

无状态的组件就可以用Function来写，传入参数即可。

函数组件用例：

import * as React from 'react'
    
    
    export default (props): React.ReactElement => {
      return (
        <div>
          <p>{props.text}<p>
        </div>
      )
    }

有状态的组件就可以用Hook或者Class。更加推荐使用Hooks,Hooks在function里面实现了class的所有功能。粗浅的理解就是让函数组价变成状态类组件

Hook用例：

import React, { useState } from 'react';
    
    function Example() {
      // 声明一个叫 "count" 的 state 变量
      const [count, setCount] = useState(0);
    
      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
        </div>
      );
    }

有坑，Hook里面的state不能监听数组变化

Class用例：

class Example extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          count: 0
        };
      }
    
      render() {
        return (
          <div>
            <p>You clicked {this.state.count} times</p>
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
              Click me
            </button>
          </div>
        );
      }
    }

*  ## 第二步 样式编写规范 ##

### 组件里面要就是 [ Component-Level CSS][Component-Level CSS]  要就是 [CSS-in-JS][] ，**尽量一个组件里只用className或者只用style** ###

[ Component-Level CSS][Component-Level CSS]用例：

components/Button.module.css

/*
    You do not need to worry about .error {} colliding with any other `.css` or
    `.module.css` files!
    */
    .error {
      color: white;
      background-color: red;
    }

components/Button.js

import styles from './Button.module.css'
    
    export function Button() {
      return (
        <button
          type="button"
          // Note how the "error" class is accessed as a property on the imported
          // `styles` object.
          className={styles.error}
        >
          Destroy
        </button>
      )
    }

[CSS-in-JS][]用例：

function HiThere() {
      return <p style={
       { color: 'red' }}>hi there</p>
    }
    
    export default HiThere

或者

*  ## 第三步 全局状态使用规范 ##

状态管理经过无数的考虑，选用Mobx，略过安装（搜索React+Mobx就有哦）。Mobx全局状态管理（全局变量）

### 尽量只在page里面使用Store，组件使用Props ###

创建一个store文件夹，在stores文件夹里面新建BStore.js：

import { action, observable } from 'mobx'
    
    class BStore {
     @observable i = 1
    
     @action add(){
      this.i = this.i + 1
    }
    }
    
    export default BStore

在pages文件夹在上新建b.js，且在b.js上使用mobx的变量:

import * as React from 'react'
    import { inject, observer } from 'mobx-react'
    
    @inject('BStore')
    @observer
    class B extends React.Component {
      render() {
        return (
          <div
            onClick={() => {
              this.props.bStore.add()
            }}
          >
            {this.props.bStore.i}
          </div>
        )
      }
    }
    
    export default B

# #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlbm55U2hpMTk5OA_size_16_color_FFFFFF_t_70]: /images/20230528/2ba7672e961444cf80ae82a6d9fb2f6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlbm55U2hpMTk5OA_size_16_color_FFFFFF_t_70 1]: /images/20230528/e74547e24bb2411599adf5c132c42835.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlbm55U2hpMTk5OA_size_16_color_FFFFFF_t_70 2]: /images/20230528/30724a933b9047e7a36c063affe97c7d.png
[Component-Level CSS]: https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css
[CSS-in-JS]: https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js