Next.js本地服务器测试联系表单时出现POST 404错误排查

问题情况 #

测试Next.js联系表单时，表单能正常记录输入数据，但无法将数据发送到API，持续收到404错误：

POST http://localhost:3000/app/(pages)/api/contact/route.tsx 404 (Not Found)

目录结构：

相关代码 #

contact-form.tsx #

'use client'

import { useState, FormEvent } from "react"
import React from "react"

export const ContactForm = () => {

    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [message, setMessage] = useState('')
    
    const onSubmit = async (e: FormEvent) => {
        e.preventDefault()
        
    
        try {
            const res = await fetch('/app/(pages)/api/contact/route.tsx',{
                method: 'POST',
                body: JSON.stringify({
                    name, email, message
                }),
                headers: {
                    'content-type': 'application/json'
                }
            })
            if (res.ok) {
                // Handle success
                console.log('Submission successful');
            } else {
                // Handle errors
                console.error('Submission failed');
            }
        } catch (err:any) {
            console.error('Err', err)
        }
    
    }
    
    
    return (
        <main>
            <form 
            className="contact-form"
            onSubmit={onSubmit}>
                <input
                    value={name}
                    onChange={e => setName(e.target.value)}
                    name="name"
                    type="text" 
                    placeholder="NAME"
                    required/>
                <input
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    name="email"
                    type="text" 
                    placeholder="EMAIL"
                    required/>
                <textarea
                    value={message}
                    onChange={e => setMessage(e.target.value)}
                    name="message" 
                    id=""
                    placeholder="MESSAGE"
                />
                <button type="submit">SEND</button>
            </form>
        </main>
    )

}

app/api/contact/route.tsx #

import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse){

    console.log('Data', req.body)
    
    res.status(200).json({name: "John Doe"})
}

已尝试的修复 #

• 将(pages)目录改名为pages
• 直接复制完整路径粘贴到fetch请求中

有效解决方案 #

1. 修正Fetch请求路径 #

Next.js App Router的API路由不需要包含app/、分组目录名(pages)或文件名route.tsx，正确的请求路径是/api/contact。修改contact-form.tsx中的fetch地址：

const res = await fetch('/api/contact',{
    method: 'POST',
    body: JSON.stringify({
        name, email, message
    }),
    headers: {
        'content-type': 'application/json'
    }
})

2. 适配App Router的API路由写法 #

当前route.tsx使用的是Pages Router的handler导出方式，App Router要求直接导出对应HTTP方法的函数（比如POST）。修改app/api/contact/route.tsx代码：

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const body = await request.json();
  console.log('Data', body);
  return NextResponse.json({ name: "John Doe" }, { status: 200 });
}

3. 确认目录结构合规 #

App Router下，API路由必须放在app/api目录下，即使上层有分组路由（如(pages)），只要app/api/contact/route.tsx存在，API端点就会被正确映射到/api/contact，无需调整分组目录。

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