React Next 项目初体验

项目背景

国际化官网

项目结构

|-- .next  
|-- components --------------- 组件
|-- lang --------------------- 多语言
|-- pages -------------------- 页面
|-- scripts ------------------ 脚本文件
|-- static ------------------- 静态资源
|-- utils -------------------- 自定义或其他库以及封装文件
|-- .babelrc
|-- .eslintignore
|-- .eslintrc
|-- .gitignore
|-- .prettierrc
|-- next.config.js
|-- package.json
|-- prettier.config.js
|-- README.md
|-- server.js
|-- yarn.lock

项目搭建

多语言：react-intl

样式：起初使用的是 jss，后来改成了引入外部样式文件

http 请求：data-fetch

UI 库：antd-design-less

路由：withRouter

所有示例均参考自 next 官方

踩坑

痛点：

1. 国际化语言切换
2. 自定义字体不生效
3. 样式使用 import 引入到对应 jsx 文件，发布到生产环境之后样式不立马生效
4. antd-design 表单样式发布到生产环境同上

填坑

1. 最终采用将语言作为路由查询参数，跳转时带向各页面，配合使用 Ant Design 的 ConfigProvider
2. 自定义样式配置

3. 在 next.config.js 文件中增加用户自定义样式配置代码

   const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './static/style/antd-custom.less'), 'utf8'));

   不在单个文件中引入相应的样式文件，而是把样式文件都在用户自定义样式文件先引入

4. 在 .babelrc 文件将 antd 库作为插件（plugins）引入，在 static 文件夹下新建 style 文件夹（存放样式文件），新建 index.less 文件，在文件中引入 antd 样式

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

5. 生产环境发起请求需要，设置反向代理（express）

GET

获取当前 URL 参数：在钩子 componentDidMount 里面获取

```

componentDidMount() {
    const search = window.location.search;
    console.log(search); // 获取 url ? 后带的参数
}

```

注意

不要自定义静态文件夹的名字，只能叫 static ，因为只有这个名字 Next.js 才会把它当作静态资源。（出自文档：next文档）

---

Ending

看过那么多别人写的 react 项目，这是第一个自己上手的实战项目，还用到了 next.js 做服务端渲染。虽然项目很简单，几乎纯展示，难度系数较低，但对于 react 入门级小白而言，第一次参与 react 实战，还是从零到一自己搭建（当然，期间有大佬相助），还是能有所收获。

因为之前写 vue 项目的时候学到了该如何的划分组件，怎么定义组件，所以对于页面和组件拆分几乎没有问题。此次实战，对 jsx 语法有了更进一步的了解，但是对 react 的生命周期还不是很了解，至少没有在此次项目中体现。对于组件间的传值，会用大于理解。对于 react 高阶组件，有待深入体验。