NextJS 13中调用后端API报错，请求协助排查解决

问题现象 #

提交contact页面表单时出现两类错误：

• 控制台路由导出错误提示：

  ⨯ Detected default export in '/Users/path-to-file/src/app/contact-route/route.js'. Export a named export for each HTTP method instead.
  ⨯ No HTTP methods exported in '/Users/path-to-file/src/app/contact-route/route.js'. Export a named export for each HTTP method.
  

• 网络请求与JSON解析错误：

  POST http://localhost:3000/app/contact-route 404 (Not Found)
  handleSubmit @ page.js:28
  
  SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
  

错误原因 #

1. API路由不符合App Router规范：NextJS 13 App Router要求API路由通过命名导出对应HTTP方法（如POST），而非Pages Router的默认导出handler写法，且请求/响应处理逻辑也不同。
2. 请求URL错误：App Router的API路由路径基于src/app下的文件结构，无需添加/app前缀。
3. 组件未导入依赖：Contact组件使用useState但未从React导入，会引发运行时错误。
4. 表单字段不匹配：输入框name属性（如full-name）与state字段（fullName）不一致，导致数据无法正确更新。

修复步骤 #

1. 修正API路由文件 src/app/contact-route/route.js #

改用App Router规范的写法，用POST命名导出并通过NextResponse处理响应：

import { NextResponse } from 'next/server';

export async function POST(request) {
  try {
    const { data } = await request.json();
    console.log("DATA FROM BCK", data);
    return NextResponse.json({ message: 'Data received successfully!' }, { status: 200 });
  } catch (error) {
    return NextResponse.json({ error: 'failed to load data' }, { status: 500 });
  }
}

2. 修正Contact页面文件 src/app/contact/page.js #

补全依赖导入、修正请求URL、统一字段命名：

'use client';
import { useState } from 'react';

export default function Contact() {
    const [data, setData] = useState({
        fullName: "",
        email: "",
        phone: "",
        message: ""
    });

    const handleChange = (e) => {
        const { name, value } = e.target;

        setData(prevData => ({
            ...prevData,
            [name]: value
        }));
    }

    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            const baseUrl = `/contact-route`;
            const response = await fetch(baseUrl, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ data })
            });
            const contactData = await response.json();
            console.log(contactData);
        } catch (error) {
            console.log(error);
        }
    }

    return (
        <div>
            <div >
                <div>
                    <div >
                        <form onSubmit={handleSubmit}>
                            <div>
                                <label htmlFor="full-name">
                                    Full name
                                </label>
                                <input
                                    type="text"
                                    name="fullName"
                                    id="full-name"
                                    onChange={handleChange}
                                    autoComplete="name"
                                    value={data.fullName}
                                />
                            </div>
                            <div>
                                <label htmlFor="email">
                                    Email
                                </label>
                                <input
                                    id="email"
                                    name="email"
                                    type="email"
                                    onChange={handleChange}
                                    autoComplete="email"
                                    placeholder="Email"
                                    value={data.email}
                                />
                            </div>
                            <div>
                                <button type="submit">
                                    Submit
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

说明：添加'use client'指令标记为客户端组件；给input绑定value属性实现受控组件，确保数据双向同步。

验证修复 #

重启NextJS开发服务器，访问contact页面提交表单，控制台应正常打印接收的数据，且无错误提示。

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