尝试使用本地主机服务器测试 Next.js 中的联系表单时出现 POST 404 错误

Question

我正在尝试在 Next.js 中测试联系表单，它会记录输入的数据，但无法将数据发送到 API，不断出现错误

“发布http://localhost:3000/app/(pages)/api/contact/route.tsx 404（未找到）”

试图找出问题所在

[目录设置]（图片）()

'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>
    )

}

contact-form.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"})
}

当前 app/api/contact/route.tsx 文件代码

尝试修复

1. 将页面目录从“(pages)”更改为“pages”
2. 直接复制路径并复制粘贴到fetch中

Answer 1

似乎您正在使用 NextJs 14。将文件名从 app/api/contact/route.tsx 转换为 app/api/contact/route.ts

用这个替换当前的route.ts代码

import { type NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const body = await req.json();

  return NextResponse.json({ body }, { status: 200 });
}

请参阅文档了解更多https://nextjs.org/docs/app/api-reference/functions/next-response