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 高阶组件,有待深入体验。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章