AWS Amplify部署的Next.js应用使用Contentful遇accessToken参数错误

问题描述 #

将Next.js应用部署在AWS Amplify平台后，在包含命名导出getStaticProps的静态页面中使用Contentful时出现以下错误：

TypeError: Expected parameter accessToken
at Module.createClient (/var/task/node_modules/contentful/dist/contentful.node.js:10095:11) 

使用的Contentful客户端初始化代码如下：

const client = contentful.createClient({
    space: process.env.CONTENTFUL_SPACE,
    accessToken: process.env.CONTENTFUL_API_KEY,
})

已在AWS Amplify控制台添加CONTENTFUL_SPACE和CONTENTFUL_API_KEY环境变量，且相同代码在Vercel部署时无此问题。

可能原因及解决方案 #

1. Amplify环境变量未配置为构建时可用 #

getStaticProps是在构建阶段执行的，而Amplify默认的环境变量可能仅在运行时生效，导致构建时无法读取到变量。

解决方法：

• 进入Amplify控制台的「应用设置」→「环境变量」，确认变量已添加；
• 编辑项目的amplify.yml构建配置文件，在environment.variables部分显式声明需要传递的环境变量，示例：

  version: 1
  frontend:
    phases:
      preBuild:
        commands:
          - npm install
      build:
        commands:
          - npm run build
    artifacts:
      baseDirectory: .next
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*
  environment:
    variables:
      CONTENTFUL_SPACE: ${CONTENTFUL_SPACE}
      CONTENTFUL_API_KEY: ${CONTENTFUL_API_KEY}
  

  若没有amplify.yml文件，可在Amplify控制台的「构建设置」中直接编辑配置。

2. 构建缓存导致变量未更新 #

Amplify会缓存构建依赖和配置，新添加的环境变量可能未被加载到构建环境中。

解决方法：

• 在Amplify控制台的「部署」页面，选择最新的部署记录，点击「重新构建」并勾选「清理缓存」选项，触发一次完整的重新部署。

3. 环境变量名称不匹配 #

检查Amplify控制台中设置的变量名称是否与代码中的CONTENTFUL_SPACE、CONTENTFUL_API_KEY完全一致，注意大小写和拼写（环境变量区分大小写）。

4. Next.js环境变量配置问题 #

虽然getStaticProps属于服务器/构建端逻辑，不需要NEXT_PUBLIC_前缀，但如果之前在本地开发时使用了.env.local文件，需确保Amplify的变量名称与本地一致，且没有在代码中硬编码错误的变量名。

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