前端框架 Nextjs React 部署-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端框架 Nextjs React 部署。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、node环境部署

二、静态导出

补充：路由问题

Nextjs打包还是非常方便的，就是网上资料不太全，导致踩了一些坑，下面是我亲自实践的两种打包方式。

这种方式最简单，也比较不容易出错，但部署时服务器需安装有node环境，速度没话说，杠杠的!

next build

构建好以后，打包好的文件默认放在/.next文件夹里

放到服务器上时仅需要如下几个部分文件即可：

nextjs 打包,前端框架,react.js,前端,前端框架

再使用：

next start
或
next start -p 80

启动前端服务即可。

这种方法官网部署很详细，导致踩了不少坑，

运行命令：

next build && next export

默认的配置是会报错的，报错如下：

nextjs 打包,前端框架,react.js,前端,前端框架

解决方法是在next.config.js文件里添加如下配置：

   images: {
        unoptimized: true
   }

nextjs 打包,前端框架,react.js,前端,前端框架

将之前的/.next和out文件夹删除，重新执行上面命令就不会报错了，最后打包结果如下：

/out文件夹里

nextjs 打包,前端框架,react.js,前端,前端框架

此时，out文件夹放到nginx服务器里配置好代理路径为 "/"即可访问到，

但值得注意的是：

nextjs 打包,前端框架,react.js,前端,前端框架

可以看到使用了static模式导出后动态路由的api是被禁止掉的，所以使用静态导出时也需要考虑自己的代码是否有用到该API，若有则最好使用其他的方法或直接使用第一种打包方式。

在next.config.js里添加上这个配置，很好用：

trailingSlash: true

总结完毕！文章来源地址https://www.toymoban.com/news/detail-526500.html

到了这里，关于前端框架 Nextjs React 部署的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

前端框架 Nextjs React 部署