Next.js动态路由部署至AWS Amplify后访问异常求助

我用Next.js搭建了一个网站，页面结构如下：

pages
|- [path]
|  |- index.js
|   
|- [for-students]
|  |- [path]
|  |  |- index.js
|
| index.js
| events.js

本地开发时一切正常，动态路由通过getServerSideProps()函数校验CMS中是否存在请求路由：存在则渲染页面，不存在则返回404错误。

但部署到AWS Amplify后，访问如mysite.com/exemple或mysite.com/for-students/internship这类动态路由时，通过页面链接跳转可正常加载，直接输入URL或刷新页面则出现500错误。

已经查看了服务器日志，但无法定位问题，求解决思路。

1. 检查AWS Amplify重写规则配置 #

Next.js动态路由需要Amplify正确转发请求，默认规则可能未覆盖嵌套动态路由场景：

• 进入Amplify控制台，找到项目 → App settings → Rewrites and redirects
• 确保添加以下规则（无则新增）：
  • 源地址：</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
  • 目标地址：/index.html
  • 类型：200 (Rewrite)
• 该规则会将所有非静态资源的请求转发到index.html，确保Next.js能处理动态路由。

2. 排查getServerSideProps环境变量问题 #

本地与Amplify部署环境的环境变量不一致，可能导致CMS请求失败：

• 进入Amplify控制台 → App settings → Environment variables
• 确认getServerSideProps中用到的所有环境变量（如CMS API地址、授权令牌）都已正确配置，且与本地有效值一致。
• 在getServerSideProps中添加日志输出（比如console.log('CMS API URL:', process.env.CMS_API_URL)），查看Amplify Logs → Web app下的服务器日志，确认环境变量是否正确加载。

3. 完善getServerSideProps错误处理逻辑 #

500错误多源于未捕获的异常，即使做了路由存在性判断，仍可能有潜在错误：

• 给getServerSideProps添加完整的错误捕获逻辑，示例：

  export async function getServerSideProps(context) {
    try {
      const { path } = context.params;
      const pageData = await fetchCMSPage(path);
      
      if (!pageData) {
        return { notFound: true };
      }
      
      return { props: { pageData } };
    } catch (error) {
      console.error('getServerSideProps error:', error);
      // 捕获异常后返回明确状态，避免触发500
      return { statusCode: 500, props: { error: '页面加载失败' } };
    }
  }
  

• 部署后查看服务器日志中getServerSideProps error的输出，定位具体错误原因。

4. 确认Amplify与Next.js版本兼容 #

若项目使用了Next.js特定特性（如Pages Router新功能），需确保Amplify构建环境支持对应版本：

• 检查Amplify Build settings中的构建命令（如npm run build）是否正确，构建过程无报错。
• 确认package.json中的Next.js版本在Amplify支持范围内。

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