Next.js 13.4.2应用在AWS Amplify部署后闲置显示代码块求助

你看到的内容是Next.js客户端 hydration 过程中用到的序列化数据，Vercel对Next.js的缓存策略做了原生适配，而Amplify的默认配置可能干扰了页面缓存与刷新逻辑，以下是具体解决步骤：

• 调整Amplify缓存规则
  进入Amplify控制台，找到目标应用，进入「App settings」→「Rewrites and redirects」页面，修改缓存规则：

  • 针对/_next/static/路径的资源，设置缓存策略为public, max-age=31536000, immutable，确保静态资源长期缓存且不被篡改
  • 针对所有页面路径（如/、/events/[id]等），设置缓存策略为no-cache, no-store, must-revalidate，避免页面被长期缓存，返回标签页时会重新请求最新内容
  • 保留Next.js核心重写规则：</^[^.]+$|\\.(?!(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$)([^.]+$)/> /index.html 200

• 适配ISR页面缓存（若使用ISR）
  如果页面使用了revalidate属性实现增量静态再生，需为这类页面路径添加stale-while-revalidate缓存策略，例如public, s-maxage=86400, stale-while-revalidate=86400，平衡缓存效率与内容新鲜度。

• 关闭Amplify自动优化功能
  进入「App settings」→「Build settings」，检查是否开启「Auto optimize images」或「Auto minify」选项，这些优化可能破坏Next.js的序列化数据结构，尝试关闭后重新部署应用。

• 配置Next.js自定义缓存头
  在项目根目录的next.config.js中添加如下配置，强制指定资源的缓存策略：

  module.exports = {
    output: 'standalone',
    headers() {
      return [
        {
          source: '/_next/static/(.*)',
          headers: [
            {
              key: 'Cache-Control',
              value: 'public, max-age=31536000, immutable',
            },
          ],
        },
        {
          source: '/(.*)',
          headers: [
            {
              key: 'Cache-Control',
              value: 'no-cache, no-store, must-revalidate',
            },
          ],
        },
      ];
    },
  };
  

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