使用nextjs做react的服务端渲染之搭架子

使用 nextjs 做 react 的服务端渲染之搭架子

二月过完年回来之后面试的第一家公司就拿到 offer 了。

公司目前技术团队刚刚成立,所以很多基础的东西都还没有。估计可以好好学习一下了,顺便做好 blog

第一个要做的事情就是把官网的架子搭出来,这种多页应用,考虑 seo 和渲染等多方面因素,我还是倾向于使用服务端渲染

那么为了前后端分离,加上公司初步认定的 react 技术栈,可以来弄一次 react 的服务端渲染了

nextjs 是个不错的选择

首先我们使用 yarn 下的命令

yarn create next-app mysite

来创建一个初始的项目结构。

1
2
3
4
5
6
7
8
9
.
├── README.md
├── components
├── next.config.js
├── node_modules
├── package.json
├── pages
├── static
└── yarn.lock

紧接着 Readme.md 可以把重写了,写好我们的基本信息和TODO list

我们要加入的是 redux,修改 webpack。组件库另谈,因为还没拿到需求,可能还要考虑自己写

redux 的话 next 官方其实给了 demo。next-with-redux

需要 redux,react-redux,redux-thunk 以及 redux-devtools-extension 工具

然后需要在 nextjs 中的 pages 下面建立一个_app.js 文件,用于放 react-redux 下的 Provider 组件

剩下的就简单了

修改 webpack 其实就是修改 next.config.js 下的东西,next 层面会去加入到他的 webpack 配置里

在修改 alias 的时候发现并没有生效。结果曲线救国使用 babel-plugin-module-resolver 可以做 alias

把 antd 的 css 也使用 babel 插件拉进来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"presets": ["next/babel"],
"plugins": [
[
"module-resolver",
{
"alias": {
"components": "./components"
}
}
],
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}