在新的App Router中,在NextJS 13.4中进行简单POST的正确方法是什么?以前使用NextAPIRequest、NextAPIResponse进行POST的方法,使用if(req.method = 'POST'),通过const { id } = request.query;从URL中提取参数,并使用NextAPIResponse抛出错误消息,这些方法似乎已经过时了。这个问题与POST、PUT、GET和POST相关.每个都有一点区别。为了清楚起见-在这里询问POST。
huwehgph1#
这里是NextJS 13.4中更新的POST API,使用了新的app routing,包含错误消息。为了使示例更加清晰,我将包含一个对supabase client的调用;您调用的API可以不同,但您可以看到错误消息等。
app routing
supabase client
// FILE NAME /app/api/tacos/route.js import { NextResponse } from 'next/server'; import supabase from '../../supabase/client'; export async function POST(request) { try { // ! OLD WAY // const { id, id, newData } = req.body; // ! OLD WAY // const dataOldWay = JSON.parse(request.body); // ! OLD WAY const {data} = await request.json(); const { data: insertedData, error } = await supabase.from("my_table").upsert(data).select(); if (error) { console.log("error catch"); return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }); // ! THE FOLLOWING DOES NOT WORK - will assume and return a status 200 response // return NextResponse.json({ error: 'Internal Server Error', status: 500 }); } return NextResponse.json({ insertedData }); } catch { return NextResponse.json({ error: 'Catch Error - Internal Server Error' }, { status: 500 }); } }
字符串为清楚起见,在Typescript中,此函数签名将为export async function POST(request: NextRequest) {阅读更多关于路由处理程序here的信息。为了完整起见,这里有一个非常简单的函数,我在客户端应用程序中使用它来调用这个API。
export async function POST(request: NextRequest) {
// This is being called from a Page in your React app // 'use client'; // import React from 'react`; // ... define your other import statements here const postData = async () => { const data = { key1: 'value1', key2: 22222222 }; try { const response = await fetch("/api/saveCalculation", { method: "POST", body: JSON.stringify({data}), headers: { "Content-Type": "application/json", }, }); if (response.ok) { //console.log("A OKAY"); console.log("OKAY"); const data = await response.json(); console.log("postData - data upserted", responseData); } else { // Handle the error // console.log("NOKAY"); console.log("NOT OKAY"); const data = await response.json(); console.log("postData - data NOT upserted", responseData); } } catch (error) { console.error("Error", error); const data = await response.json(); console.log("postData - try/catch - error", responseData); } };
型注意:你当然可以在代码中更高的位置合并responseData声明,但我保持了它的简单性,为了可读性,使用了更小的范围。
1条答案
按热度按时间huwehgph1#
这里是NextJS 13.4中更新的POST API,使用了新的
app routing
,包含错误消息。为了使示例更加清晰,我将包含一个对
supabase client
的调用;您调用的API可以不同,但您可以看到错误消息等。字符串
为清楚起见,在Typescript中,此函数签名将为
export async function POST(request: NextRequest) {
阅读更多关于路由处理程序here的信息。
为了完整起见,这里有一个非常简单的函数,我在客户端应用程序中使用它来调用这个API。
型
注意:你当然可以在代码中更高的位置合并responseData声明,但我保持了它的简单性,为了可读性,使用了更小的范围。