非根目录部署 nextjs 项目，资源文件 请求404 的问题

最新推荐文章于 2026-03-09 06:38:43 发布
原创 最新推荐文章于 2026-03-09 06:38:43 发布 · 1.4k 阅读 · 11 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测

最近在学习next项目编写的代码放到服务器上静态资源404

先分析问题
在这里插入图片描述

  1. 到服务器上查看是有资源目录的
  2. 是不是项目配置有问题
  3. 是不是nginx配置有问题在这里插入图片描述
    经过排查1和2是没有问题的目前来看只有3
    检查一下nginx配置
    在这里插入图片描述
    在这里插入图片描述

尝试着把静态资源的配置禁用
在这里插入图片描述
问题解决
我的next项目用的是pm2管理
在这里插入图片描述
每次需要手动构建，后期考虑使用其它方式进行部署
再就是每次构建需要暂用的内存比较大，导致服务器异常

介绍一下这个项目

使用next.js 编写的一个个人博客网站 主要是学习一下next.js的编码过程
开发过程中遇到了一些问题
例如：next.js使用的react是19版本过高 导致antd 和一些插件不兼容 编译和打包失败的问题常有发生
还好都一一克服了
考察了几个富文本编辑器 最后采用的是tiptap
富文本编辑器地址
后端使用的是node编写的crud的基本服务
文章读取先读取本地markdown文件 没有的话在展示编辑器
由于编辑器还在熟悉中 有很多功能还没有完善 后续完善了在逐步开放出来
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

标签
#前端 #react.js
i18n在NextJS中路径国际化跳转方案对比
W1192931158的博客
05-12 787
场景如果没有有它之后用户访问/a/b❌ 报 404（因为没有✅ 自动 302 跳转到/zh/a/b或/en/a/b用户访问静态资源✅ 正常✅ 依然正常，不会被重定向用户访问/zh/a/b✅ 正常✅ 正常，不触发重定向判断语言方式只能靠客户端/中间件读取 cookie✅ 优先用接口、然后 cookie。
【49】Camunda8-Self-Managed部署之Docker方式
AlieNeny的博客
05-12 1646
围绕camunda8 self-managed，介绍了基于Docker部署相关服务的过程。
Nextjs测试：了解Next.js，组件，页面和样式，处理（404）错误和使用getInitialProps LifeCycle Hook的基础！
02-16
Nextjs测试：了解Next.js，组件，页面和样式，处理（404）错误和使用getInitialProps LifeCycle Hook的基础！
Python数据清洗实战：用RapidFuzz搞定模糊匹配（附完整代码示例）
最新发布
pear55的博客
03-09 507
本文详细介绍了在Python数据清洗中，如何利用RapidFuzz库高效解决字符模糊匹配难题。通过实战代码示例，演示了从处理拼写错误、格式不一致的脏数据，到构建实体对齐与记录去重的完整清洗管道，帮助开发者提升数据质量与处理效率。
在Nextjs中使用Koa自定义服务器遇到的坑一 ------ 显示无限404
bidang3275的博客
06-11 1693
在Nextjs中使用Koa自定义服务器遇到的坑一 ------ 显示无限404想实现的功能路由映射失败问题代码问题分析2. 此时加上 `await next()` 让其继续执行后面的中间件3. 接着分析为什么还是失败？4. 知道了路由已经匹配到了，但是依旧没有显示a.js文件，接着分析错误。5. 分析总结解决方法 想实现的功能 在地址栏中输入/a/1，跳转到 Nextjs 的 a.js 文件。 路由映射失败 问题代码 使用 koa 做 Nextjs 的路由映射遇到的问题，匹配到了 /a/:
解锁国内 404 页面：Next.js 设置指南和 33 个有趣 SVG 资源分享
weixin_43303603的博客
04-05 1480
松桑分享了Nextjs如何设置404页面，并整理了 33 个有趣的 404 图片，助你打造令人耳目一新的 404 页面。
nextjs系列教程(六)：自定义App、Document、404页面、服务器跨域
harry的博客
04-06 2586
nextjs系列教程
NextJS项目的部署以及多环境的实现
2301_78287784的博客
07-02 5716
所有部署文件都已经完成了，得到docker镜像后，不管是部署到K8s的集群上面还是自己启动一个docker容器都很简单，在这里就忽略了。最后的部署效果完美地实现了我的目的：开发环境的请求前缀都有/dev，也成功请求到了开发环境的那台后端服务器。如上文提到，Nginx需要根据不同的路径前缀来决定请求哪个后端，那么就需要前端去判断当前是什么环境再设定当前的请求的路径前缀。这两条命令修改的时候，我就决定使用别的环境变量来区别本项目的开发环境与生产环境。也没啥特别的，就是把Next项目编译好的静态文件复制到。
前端框架 Nextjs React 部署
热门推荐
qq_50909707的博客
01-05 1万+
Nextjs React 打包 部署 踩坑总结
Next.js 静态资源非根目录部署指南
2501_93001072的博客
08-13 787
通过正确配置 Next.js 的basePath和，再配合 Nginx 的路由规则，可以实现 Next.js 应用在非根目录下的完美部署。这个方案适用于需要在同一域名下部署多个应用的场景。希望这篇文章能帮助大家解决 Next.js 非根目录部署的问题。如有任何疑问，欢迎讨论交流。
Nextjs
woyebuzhidao321的博客
04-14 1万+
一、Next.js 介绍 Next.js 是 React 服务端渲染应用框架. 用于构建 SEO 友好的 SPA 应用. 支持两种预渲染方式, 静态生成和服务器端渲染. 基于页面的路由系统, 路由零配置 自动代码拆分. 优化页面加载速度. 支持静态导出, 可将应用导出为静态网站. 内置 CSS-in-JS 库 styled-jsx 方案成熟, 可用于生产环境, 世界许多公司都在使用 应用部署简单, 拥有专属部署环境 Vercel, 也可以部署在其他环境 二、创建 Next.js 项目 创建: npm i
Nginx解决单页应用刷新报错404的问题
Oliver尹的博客
02-19 8603
将React应用打包后，部署到服务器上，在非首页的地方使用浏览器自带的刷新功能，页面刷新失败，显示404；
用 Next.js 15 开发图片查看网站：部署后图片加载 404 坑
m0_58057606的博客
11-01 861
在 Next.js 15 中遇到部署后图片加载 404 错误，通常涉及以下核心问题及解决方案。
nextjs开发 + vercel 部署 ssr ssg
zw52yany的博客
03-09 1567
最近想实践下ssr 就打算用nextjs 做一个人博客 ， vercel 部署 提供免费域名，来学习实践下ssr ssgnextjs 一个轻量级的react服务端渲染框架vercel 由 Next.js 的创建者制作 支持nextjs 部署 免费静态网站托管。
Web3前端+NextJs+creat-web3-dapp报错汇总
u010263350的博客
11-24 1039
前端，web3，nextjs框架报错汇总
nextjs前端工程如何打包部署（nginx）
徐同保的专栏
10-17 858
把【.next/server/app】目录下的所有文件复制到【/temp/test】文件夹下。1. nextjs打包后会生成多个html，而不是像vue打包后只生成一个html文件。把【.next】目录下的所有文件复制到【/temp/text/_next】文件夹下。需要通过nginx的try_files 指令。
前端(react)框架nextjs
西京刀客
08-06 5184
**Next.js是一个用于生产环境的React 应用框架（官方介绍：The React Framework for Production），使用它可以快速上手开发 React 应用（ enables you to build superfast and extremely user-friendly static websites,），而不需要花很多时间和精力去折腾各种开发工具。**所谓的用于生产环境，是指功能和稳定性足够，有大量的实际应用案例。
ubuntu部署小笔记-采坑
pure81的博客
02-21 1209
在实际将项目部署到linux服务器（ubuntu）的过程中遇到的一些小细节的问题在这里记录一下。
NextJs 学习笔记
Joey_Tribiani的博客
12-07 1143
之前使用过 Nuxt3 基于前端框架 Vue3 来开发网站，因为 Nuxt3 很多地方借鉴了基于 React 的 SSR 框架 Next，因此最近抽时间开始学习一下 Next 这个框架。 如果想用 typescript 开发则可以在上面的命令后面加上选项。Next 框架的页面开发语法是 React，关于 React 有关用法这里不在赘述。和 Nuxt 一样（准确地讲应该是 Nuxt 和 Next 类似，毕竟 Next 前辈，是 Nuxt 的借鉴对象），在项目根目录下有 pages 目录，这个目录的文件系统路
Delphi7 二维码 ZXingQRCode库生成二维码（测试工程）
Delphi7 ZXingQRCode库生成二维码，附带FastReport_4二维码文件，源代码来自网络，分享。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值