Next.js搭配Amplify CLI查询数据出现Amplify.configure(awsconfig)报错如何解决？

警告原文：[WARN] 32:17.454 DataStore - Data won't be synchronized. No GraphQL endpoint configured. Did you forget Amplify.configure(awsconfig)?

• 配置导入与初始化参数匹配检查
  你的 aws-exports.js 默认导出的配置变量名为 awsmobile，初始化时需要确保传入 Amplify.configure() 的参数和你导入的变量名一致，不要误用网上示例中的awsconfig变量名，正确写法参考：

  'use client' // Next.js 13+ app目录下需添加客户端组件标记
  import { Amplify } from 'aws-amplify'
  import awsmobile from './aws-exports' // 请替换为你项目中aws-exports.js的实际相对路径
  
  Amplify.configure(awsmobile)
  

• Next.js 渲染环境适配检查
  Amplify DataStore 依赖客户端运行环境，如果你在服务端组件、getServerSideProps等服务端执行逻辑中初始化Amplify，或者尝试调用DataStore接口，会导致配置无法被正确识别。建议将Amplify初始化逻辑放在根布局的客户端组件中，所有DataStore调用逻辑都放在客户端组件内执行。
• 配置字段有效性检查
  确认你的 aws-exports.js 中占位的aws_appsync_graphqlEndpoint、aws_appsync_apiKey字段已经被Amplify CLI自动填充为有效值，不要手动留空或使用占位值，缺失有效端点、密钥会直接触发该警告。
• 旧版本Amplify兼容处理
  如果你使用的是Amplify v5及更早版本，可以在配置时显式开启DataStore同步开关：

  Amplify.configure({
    ...awsmobile,
    DataStore: {
      syncEnabled: true
    }
  })
  

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