Next.js SSR动态路由在AWS Amplify中出现404错误求助

问题描述 #

我在Next.js中使用SSR动态路由，文件夹结构如下：

workflow-templates
|
|___ [[...page]]

本地运行完全正常，但部署到AWS Amplify后访问相关路由出现404错误。我已在Amplify重定向编辑器中添加以下配置，但问题仍未解决，是否遗漏了AWS中的关键配置？

添加的重定向配置：

{
  "source": "/workflow-templates/<*>",
  "target": "/workflow-templates/[[page]]/index.html",
  "status": "404-200",
  "condition": null
}

排查与解决方案 #

1. 修正重定向目标路径 #

你当前的重定向目标路径错误，Next.js的动态路由（尤其是SSR模式）不需要指向[[page]]/index.html，正确的目标应该指向路由入口本身。修改后的重定向配置如下：

{
  "source": "/workflow-templates/<*>",
  "target": "/workflow-templates",
  "status": "404-200",
  "condition": null
}

这个配置会把所有/workflow-templates/xxx路径的请求转发到路由入口，让Next.js处理动态参数。

2. 确保Amplify启用SSR支持 #

如果你的路由是SSR（服务器端渲染）模式，而非静态导出，必须确认Amplify的构建配置正确：

• 进入Amplify控制台的Build Settings，检查amplify.yml中的构建命令为npm run build，不要包含next export命令
• 检查next.config.js，确保没有设置output: 'export'（该配置会强制静态导出，导致SSR路由失效）
• 对于Next.js 13+的App Router，确保项目结构符合App Router规范，且Amplify的构建环境支持Next.js的SSR运行时

3. 调整重定向规则优先级 #

Amplify的重定向规则是按顺序匹配的，把这条动态路由的重定向规则移到所有规则的最顶部，避免被其他默认规则（比如根路径重定向）覆盖。

4. 验证页面组件的参数处理 #

确认[[...page]]文件夹中的页面组件正确接收并处理动态参数：

• App Router（page.js）示例：

// app/workflow-templates/[[...page]]/page.js
export default function WorkflowTemplatesPage({ params }) {
  const { page } = params;
  // 根据page数组处理路由逻辑，比如page[0]对应第一个动态分段
  return <div>当前路由：/workflow-templates/{page?.join('/')}</div>;
}

• Pages Router（index.js）示例：

// pages/workflow-templates/[[...page]].js
export default function WorkflowTemplatesPage({ query }) {
  const { page } = query;
  // 处理page参数逻辑
  return <div>当前路由：/workflow-templates/{page?.join('/')}</div>;
}

内容的提问来源于stack exchange，提问作者Chirag Gupta