在Next.js应用中通过Amplify配置单页面CloudFront缓存策略

要在Next.js应用中通过Amplify配置文件（customHttp.yml 或 amplify.yml）给单个动态页面（如 domain.com/category/[slug]）设置缓存控制，只需在现有规则基础上添加对应路由的匹配规则即可，具体配置如下：

配置示例 #

方式1：使用 customHttp.yml #

customHeaders:
  # 原有CSS文件缓存规则
  - pattern: '**/*.css'
    headers:
      - key: Cache-Control
        value: 'public,max-age=31536000,immutable'
  # 原有JS文件缓存规则
  - pattern: '**/*.js'
    headers:
      - key: Cache-Control
        value: 'public,max-age=86400'
  # 新增category动态页面缓存规则
  - pattern: 'category/*'
    headers:
      - key: Cache-Control
        value: 'public,max-age=3600' # 可根据需求调整缓存时长，比如设置为0则不缓存

方式2：在 amplify.yml 中配置 #

如果不想单独使用customHttp.yml，也可以直接在amplify.yml的headers字段下添加规则：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  # 添加headers配置
  headers:
    - pattern: '**/*.css'
      headers:
        - key: Cache-Control
          value: 'public,max-age=31536000,immutable'
    - pattern: '**/*.js'
      headers:
        - key: Cache-Control
          value: 'public,max-age=86400'
    - pattern: 'category/*'
      headers:
        - key: Cache-Control
          value: 'public,max-age=3600'

关键说明 #

• 匹配规则：category/* 会匹配所有 category/ 下的子路径（即所有[slug]对应的动态页面），如果你的路由结构更深，可调整pattern为**/category/*来匹配任意层级下的category动态页。
• 缓存策略：Cache-Control的value可根据需求修改，比如：
  • 若希望页面立即失效需重新验证，可设为 'public, max-age=0, must-revalidate'
  • 若要禁止缓存，可设为 'no-store, no-cache'

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