AWS Amplify v6 POST请求报InvalidApiName错误求助

问题场景 #

在Next.js项目中使用AWS Amplify v6发起REST API POST请求时，提交表单后控制台输出错误：InvalidApiName: API name is invalid.，但已确认API名称和路径无误。相关代码如下：

初始化配置（Layout.tsx） #

import { Amplify } from 'aws-amplify';
import amplifyconfig from '../src/amplifyconfiguration.json';

Amplify.configure(amplifyconfig)

请求代码（Form.tsx） #

import { post } from 'aws-amplify/api'
import { useFormik } from 'formik';

export default function Form() {
    const formik = useFormik({
        initialValues: {
            firstname: "",
            lastname: "",
            email: "",
            project: "Design",
            description: "",
            terms: "",
        },

        onSubmit: async (values) => {
            if(isVerified === true) {
                try{
                    let resOperation = post({
                        apiName: 'quotes',
                        path: '/create'
                    })
                    await resOperation.response
                } catch(err) {
                    console.log(err)
                }
            }
        }
    })

    return (
        <div>form</div>
    )
}

排查方向 #

• 核对amplifyconfiguration.json中的API名称
  打开项目根目录的amplifyconfiguration.json，找到aws_api节点下的name字段，确保和请求中apiName: 'quotes'完全一致（包括大小写、空格、特殊字符）。比如配置里是"name": "Quotes"，请求里的小写quotes就会触发报错。
• 确认Amplify初始化的客户端执行时机（Next.js App Router）
  Next.js App Router中，Layout.tsx默认是服务器组件，而Amplify.configure()需要在客户端环境执行。可将初始化代码移到带'use client'指令的组件，或在Layout.tsx中用useEffect包裹：

  'use client';
  import { Amplify } from 'aws-amplify';
  import amplifyconfig from '../src/amplifyconfiguration.json';
  import { useEffect } from 'react';
  
  export default function RootLayout({ children }) {
    useEffect(() => {
      Amplify.configure(amplifyconfig);
    }, []);
  
    return (
      <html lang="en">
        <body>{children}</body>
      </html>
    );
  }
  

• 检查API云端部署状态
  终端执行amplify status，查看REST API状态是否为Deployed。若API未部署或处于Pending状态，本地配置文件不会包含有效API信息，导致名称验证失败。未部署则执行amplify push完成部署。
• 重新拉取最新配置
  执行amplify pull从云端拉取最新Amplify配置，覆盖本地amplifyconfiguration.json，避免旧配置缓存导致的不匹配。
• 确认POST请求v6语法完整性
  虽非当前错误直接原因，但后续传递表单数据时，v6的post方法需通过options.body传入参数：

  let resOperation = post({
      apiName: 'quotes',
      path: '/create',
      options: { body: values }
  })
  

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