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的服务器端渲染,虽然个人造轮子也重要,但是实际开发使用一个开源的,受欢迎的框架来提高开发效率,降低风险更明智。
- ssm框架项目导入及解决tomcat部署问题
- EF(Entity Framework)发生错误”正在创建模型,此时不可使用上下文“的解决办法。 正在创建模型,此时不可使用上下文。如果在 OnModelCreating 方法内使用上下文或如果多个线程同时访问同一上下文实例,可能引发此异常。请注意不保证 DbContext 的实例成员和相关类是线程安全的。 临时解决了这个问题,在Context的构造函数中,禁用了自动初始化:
- 项目部署到阿里云登录页面图形验证码乱码问题的解决办法
- [C#] .NET Core项目修改project.json来引用其他目录下的源码等文件的办法 & 解决多框架时 project.json 与 app.config冲突的问题
- react基础学习和react服务端渲染框架next.js踩坑
- 项目只用struts但tomcat公用完整SSHjar包后部署失败问题解决办法
- YII框架开发项目中遇到的问题及解决办法
- tomcat部署项目所遇到的问题及解决办法
- React使用Next.js作服务器端渲染
- Maven构建部署项目遇到的各种问题以及解决办法
- Next.js实现react服务器端渲染的方法示例
- 使用solr4.9部署到tomcat上出现Context [/solr] startup failed due to previous errors问题以及解决办法
- jenkins远程部署play framework项目时遇到的问题及解决办法
- [知了堂学习笔记] SSM框架项目中遇到的问题及解决办法_01
- Android项目实战_新浪微博客户端开发过程中遇到的问题及解决办法01
- 自己的项目部署到服务器上的部分问题解决办法
- web项目中url-pattern改成'/'后,js、css、图片等静态资源(404)无法访问问题解决办法
- react ice-design ie兼容问题,由于ie浏览器不支持箭头函数,导致react项目在ie中不兼容的解决办法
- ReactJS & dva 项目常见报错问题与解决方法 (react-router 4)
- 运用SpringMVC框架做项目时css,js,图片等静态资源被拦截的解决办法