React服务器端渲染框架next.js项目实战及部署上下文context问题解决办法

在前段时间折腾过搭建react服务器端项目架构，点击这里了解下，正好最近有个重构PC网站的需求，考虑SEO等因素。在做技术选型的时候决定采用nextjs。项目开发过程中，nextjs的体验非常棒，个人觉得比create-react-app开发体验还要好，特别是HMR功能，虽然都有这个功能，但是nextjs做的更好一些。CRA里面修改了代码，格式化了文档，会导致整个页面刷新，这对于SPA项目的开发体验就很不好了。我在使用nextjs的开发过程中，如果不是自己主动去刷新浏览器，几乎就没有刷新过整个页面，所有的修改都是在不刷新页面的前提下就反映到了页面上，这个体验真的很棒。

入门体验

nextjs的文档个人觉得写的不算特别详细，好在github的examples目录下有很多示例可以参考，比如我没有使用now来做部署，而是使用了express。很容易就找到参考的示例。开发过程编译，打包等速度都很快，开发体验一直非常愉悦。

项目中的几个设置

1. 里面用的三个依赖的左右：

① nextjs配置多个插件时使用next-compose-plugins很容易解决，要不然，写起会有点麻烦

② 把图片当成模块一样引入需要使用next-images

③ 样式支持less需要next-less

2. BuildId我这里就直接固定一个，如果以后开发新版改成v2（或其也行）

3. 打包目录distDir修改为build（默认为.next)

部署时遇到的问题

1. 设置context来访问的问题

部署时，我需要配置一个context，因为一个域名下有多个项目。本地开放时都是根路径，没啥问题，但是现在需要设置一个context（访问格式：域名/context）。修改入口文件app.js（或者server.js，项目通过node app.js来启动），在得到如下结果之前，我还是折腾了1天多，最终通过查看一些源码，多方调试才成功。

修改下next.config.js

2. windows下开发部署到linux上的路径中的’\\’问题

两个办法一个是手动替换pages-manifest.json文件里面所有路径下的’\\’,替换为’/’

另外一个办法：（推荐）

在linux上面去打包，这样一劳永逸，最省事。所以开发环境还是mac好啊

小结

推荐使用nextjs来做基于React的服务器端渲染，虽然个人造轮子也重要，但是实际开发使用一个开源的，受欢迎的框架来提高开发效率，降低风险更明智。

作者：张雪飞
出处：https://zhangxuefei.site/p/2195
版权说明：欢迎转载，但必须注明出处，并在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。