在制作NextJS API端点时使用路由处理程序的服务器操作

Question

我有一个Web应用程序，需要曝光移动应用程序的API（获取，发布，放置和删除端点），目前我在客户端和服务器组件中都进行了提取，但是我查看了客户端的组件，并以为为什么我不会为这些提取而做

server actions

为什么在服务器上可以执行，而不是在客户端上执行，因此它效果不佳，但我的工作方式又是我的工作！ put方法，但是服务器操作使用邮政方法，这是否意味着路由处理程序端点将丢失其HTTP方法，这全都是发布，这不是这种情况吗？

如果服务器操作在服务器上执行，那么他们如何使用仅在浏览器中可用的获取？

clientComponent

  const handleEdit = async () => {
    if (validateRow(editingRow)) {
      try {
        const updatedItem = await editRow(
          locale,
          apiEndpoint,
          editingId,
          editingRow
        ); // Use Server Action
        setData(
          data.map((item) =>
            item.id === editingId ? { ...item, ...updatedItem } : item
          )
        );
        cancelEditing();
      } catch (error) {
        console.error("Error updating item:", error);
      }
    }
  };

ServerAction

"use server";

export async function editRow(locale, apiEndpoint, id, updatedRow) {
  try {
    const response = await fetch(
      `http://localhost:3000/${locale}/${apiEndpoint}/api/${id}`,
      {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(updatedRow),
      }
    );

    if (response.ok) {
      return await response.json();
    } else {
      throw new Error("Failed to update item");
    }
  } catch (error) {
    console.error("Error updating item:", error);
    throw error;
  }
}

api/route.js

export async function PUT(request, { params }) {
  const t = await getTranslations("HomePage");
  const { package_name, package_description, package_price } =
    await request.json();
  const { id } = await params;
  if (!id || !package_name || !package_price || !package_description) {
    return Response.json(
      { message: "Missing required fields" },
      { status: 400 }
    );
  }

  try {
    await db(
      "UPDATE packages SET package_name = ?, package_description = ?, package_price = ? WHERE id = ?",
      [package_name, package_description, package_price, id]
    );

    return Response.json(
      { message: "Package updated successfully" },
      { status: 200 }
    );
  } catch (error) {
    return Response.json({ message: t("somethingWrong") }, { status: 500 });
  }
}

Answer 1

editRow

）提交服务器来起作用。您可以在浏览器的DevTools中使用“网络”面板看到网络流量。服务器获取参数的值后，它将执行

editRow

函数，该函数调用nodejs

环境的

fetch()

（在服务器上）。

这里是一个例证：

Source：with next.js服务器操作：学习经验教训