Next.js应用中Amplify重定向失效问题求助
2026-8-6
Next.js + AWS Amplify 重定向404问题解决办法
Next.js的路由机制和纯客户端SPA（比如普通React应用）不一样，直接套用Amplify默认的SPA重定向规则会导致404，以下是针对性的解决步骤：
正确的重定向规则配置
在Amplify的重定向设置里，添加以下规则（确保规则顺序从上到下）：
- 源地址：
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> - 目标地址：
/index.html - 类型：
200 (Rewrite)
这个正则会排除所有静态资源文件，只把非文件路径的请求重写到index.html，让Next.js的客户端路由接管，同时保证静态资源能正常加载。
如果是静态导出的Next.js应用（使用next export），也可以用更简单的规则：
- 源地址：
/* - 目标地址：
/index.html - 类型：
200 (Rewrite)
排查你现有配置的问题
- 初始配置可能误用了
Redirect（3xx状态码）而非Rewrite（200状态码），Next.js需要服务器返回200的index.html才能正确触发客户端路由。 - 修改后的配置如果仍有问题，检查规则顺序：静态资源相关的规则要放在SPA重定向规则前面，避免静态文件被错误重写。
额外检查项
- 确认Amplify部署设置的构建命令是
npm run build，输出目录对应Next.js的构建产物：如果是SSG/ISR，输出目录是.next；如果是静态导出，输出目录是out。 - 若使用Next.js 13+的App Router，确保Amplify的部署配置支持最新的路由结构（Amplify目前已兼容App Router，但需确认构建命令正确）。
内容的提问来源于stack exchange，提问作者Abdul Rafay
相关产品推荐
相关产品推荐
