英文:
Fetching Next.js API Route in the app directory gives 404 Not Found
问题
我在处理 Next.js 13 的 app
路由时遇到了问题。每当我尝试从 Postman 等工具访问时,它总是返回 404 Not Found。
我有以下文件结构:
例如,我的其中一个 API 文件如下:
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export default async function all(req, res) {
if (req.method !== 'GET') {
return res.status(405).json({ error: '不允许的方法' });
}
try {
// 使用 Prisma 获取所有管理员
const admins = await prisma.admin.findMany();
return res.status(200).json(admins);
}
catch (error) {
return res.status(500).json({ error: '获取管理员失败' });
}
}
当我发送 GET localhost:3000/api/admin/all
时,它总是返回 404。我找不到错误在哪里。
我尝试了其他文件或文件夹命名方式。从我的应用程序中调用,使用 curl 命令,或者使用 Postman。我的其他 API 路由也返回相同的 404 错误。
英文:
I am struggling with Next.js 13's app
routing. It always gives me a 404 Not Found when I try to access fromPostmann for example.
I have this file structure:
And for example, one of my API files is:
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export default async function all(req, res) {
if (req.method !== 'GET') {
return res.status(405).json({ error: 'Method not allowed' });
}
try {
// Get all admins using Prisma
const admins = await prisma.admin.findMany();
return res.status(200).json(admins);
}
catch (error) {
return res.status(500).json({ error: 'Failed to get admins' });
}
}
When I send a GET localhost:3000/api/admin/all
it always responds with a 404. Couldn't find where is the error.
I tried other file or folder namings. Calling from my own app, using the curl command, or using Postman. My other API routes give the same 404.
答案1
得分: 5
API路由应该存储在名为route.js
的文件中。意味着app/api/admin/all.js
应该改为app/api/admin/route.js
,对应的URL应为/api/admin
。此外,函数内部应该使用特定的定义:
export async function GET(request) {}
GET
可以替换为POST
、PUT
、PATCH
等。在你的情况下,它应该是:
// 请注意NextResponse的导入位置:
import { NextResponse } from "next/server";
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
// 请注意函数定义:
export async function GET(req) {
return NextResponse.json(
{ error: "Method not allowed" },
{
status: 405
}
);
}
// 请注意函数定义:
export async function POST(req) {
try {
// 使用Prisma获取所有管理员
const admins = await prisma.admin.findMany();
return NextResponse.json(admins, {
status: 200,
});
} catch (error) {
return NextResponse.json(
{ error: "Failed to get admins" },
{
status: 500,
}
);
}
}
英文:
An API Route should be in a file called route.js
. Meaning app/api/admin/all.js
should be app/api/admin/route.js
, with the corresponding URL being /api/admin
. Also, the functions inside should use a specific definition:
export async function GET(request) {}
GET
, can be replaced with POST
, PUT
, PATCH
, etc. In your case, it would be:
// Notice from where NextResponse is imported:
import { NextResponse } from "next/server";
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
// Notice the funciton definiton:
export async function GET(req) {
return NextResponse.json(
{ error: "Method not allowed" },
{
status: 405
}
);
}
// Notice the funciton definiton:
export async function POST(req) {
try {
// Get all admins using Prisma
const admins = await prisma.admin.findMany();
return NextResponse.json(admins, {
status: 200,
});
} catch (error) {
return NextResponse.json(
{ error: "Failed to get admins" },
{
status: 500,
}
);
}
}
答案2
得分: 0
除了Youssouf的回答(我觉得非常有帮助),如果你在获取request.body
的内容时遇到问题,可以使用const body = await request.json()
来获取请求体。
https://developer.mozilla.org/en-US/docs/Web/API/Request/json
英文:
In addition to Youssouf's answer (which I found very helpful), if you have problems getting the content of request.body
, use const body = await request.json()
to get the body.
https://developer.mozilla.org/en-US/docs/Web/API/Request/json
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论