您好，我是沧沧凉凉，是一名前端开发者，目前在掘金、知乎以及个人博客上同步发表一些学习前端时遇到的趣事和知识，欢迎关注。

---

2022年了，我也要重新搭建我的个人主页，去年我是使用的create-react-app进行搭建，随着半年来对于React使用的逐步加深，我决定重置我的个人主页，这次我选择的是Nextjs重新进行搭建。

我们在做中后台应用的时候可以选择umi，在一个外包公司里面，制作一个官网也是一个非常常见的需求，然而使用umi完全可以满足我们制作官网的需求，但是这篇文章我想要讲一下制作官网、博客时，你可以选择的另一个React系框架：next.js。

在umi的官方文档中，直言不讳的说出了umi有非常多的功能都是参考next.js。

为什么不选择create-react-app，因为它默认不包含路由，不支持SSR，既然要做官网，我们就需要考虑到需要SSR的情况，虽然并不是所有的外包项目都会花钱去请人做SEO，但优先考虑到这种情况，后面如果真的要做SEO你也可以做到临危不乱。

路由

在pages目录下的文件会自动生成路由

动态路由

通过 getStaticProps 获取动态路由 [id].js 传递的参数

静态资源

public文件夹下的目录会直接被打包到根目录中，比如robots.txt、静态资源就应该放到该目录下。

加载第三方资源

使用Nextjs提供的标签代替原生标签：

image 替代 img

Head 替代 head

使用 相当于自定义HTML中 标签部分

Script 替代 script

• strategy：lazyOnload 告诉浏览器在空闲时间加载这个第三方脚本。
• onLoad：在该脚本加载完毕后，立即运行其中的代码。

Next内置了对 styled-jsx 的支持，同时也可以引入第三方库 styled-components 。

内置了对 .css .scss文件的支持 并且对 CSS Modules 进行了默认支持

全局样式

在Next中，只能够在pages/_app.js中引入全局样式，不能在其它地方引入全局样式。

使用sass

Next默认支持sass，如果你想要使用你只需要安装一下sass

npm install sass

你还可以使用React中最火的css-in-js方案styled-components。

渲染markdown

https://nextjs.org/learn/basics/dynamic-routes/render-markdown

请求

Nextjs也是可以用来提供一些接口，因为我们无论是在做官网还是做博客，总有些数据是需要存储进数据库，然后展示在界面上，如果你这个项目有后端负责，那么这一部分完全不用管，如果这个项目就是你一个人开发，那么你可以使用Nextjs连接你的数据库。

接着只需要访问这个地址：

你可以看到返回一串JSON。

但是！如果你一旦使用了数据库，那么部署项目的时候就无法再使用静态包的形式，因为静态包是无法访问数据库的，只有部署成为Node项目，而且你需要保证数据库可以正常进行访问，那么这个时候你可能需要docker进行部署。

打包

打包

运行命令

npm run build
# 或者
yarn build

打包后的资源是无法放到Nginx这种静态服务器上面，只能通过npm run start启动Node进行运行。

静态打包

静态打包时一个非常常见的需求，因为静态包占用的服务器资源远小于Node项目，但如果需要做SEO的话还是推荐直接进行打包，然后通过Node进行启动。

需要值得注意的是，静态打包是不会包含API路由，也就是说Next上的所有后端服务都会失效，不会被打包到最终的文件夹中。

nest build && nest export

运行结束后会发现多出了一个out文件夹，直接可以将该文件夹中的文件部署到Nginx这种静态服务器上。

部署

静态包

docker

docker将部署难度降低了一大截，现在很多后端项目都会通过docker进行部署，如果你的Next项目使用到了数据库，推荐使用docker进行部署，方便快捷，当然你也可以不通过docker进行部署，直接普通部署，但是项目中服务器的地址一定要填写正确。

最后

如果官网的需求不太复杂，你完全可以考虑使用Vue来进行搭建（如果你对React系不是太熟悉的话），Vue搭建官网不得不说也是一个非常好的选择。

Vue官方已经帮你整合了Vue-Router，同时Vue具有样式隔离，让你书写CSS样式变得非常方便，如果你需要使用less或者sass也可以直接进行引入，同时你如果需要SSR的话也可以选择Vue对应的Nuxt.js。