NextJS13服务器组件获取未命中API端点

7vux5j2d  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(141)

我正在使用NextJS 13与应用程序路由器。这是我的项目的文件结构。
File Structure Screenshot

async function fetchForm(id: string) {
    const endpoint = `${process.env.NEXT_PUBLIC_URL}/api/paymo/${id}`
    console.log("endpoint: ", endpoint);
    const response = await fetch(endpoint, {
        next: { revalidate: 0 }
    });
    return await response.json();
}

const FormPage = async (
    { params }: { params: { id: string } }
) => {

    const id = params.id;
    const data = await fetchForm(id);

    console.log("data: ", data);

在我的app/protected/paymo/viewer/[id]/page.tsx中,我试图从我的API中获取数据。我的NEXT_PUBLIC_URL已被设置为http://localhost:3000,并且在控制台上打印
endpoint: http://localhost:3000/api/paymo/clixw3o9u0005uma24m605z33

export async function GET(
    request: Request,
    { params }: { params: { id: string } }
) {

    const paymoId = params.id;

    console.log(`GET /api/paymo/${paymoId}`);

    console.log("API PAYMO GET");

在我的app/api/paymo/[id]/route. ts中,我试图记录端点是否被击中。
1.当我呈现FormPage组件时,"APIPayMOGET"没有被记录。我的API端点没有被命中。
1.有趣的是,当我将“http://localhost:3000/api/paymo/clixw3o9u0005uma24m605z33”粘贴到我的浏览器URL中时,它会打印“API PAYMO GET”,并正确返回JSON内容。
如何修复我的FetchForm,使其正确命中API端点?
我把"http://localhost:3000/api/paymo/clixw3o9u0005uma24m605z33"粘贴到我的浏览器URL中,它打印"API PAYMO GET",并正确返回JSON内容。但是,使用fetchForm函数获取内容不起作用。

cgh8pdjw

cgh8pdjw1#

我怀疑这是一个表单提交处理程序,所以它在客户端处理。
客户端组件不能访问process,这是一个node.js API。
您可以使用导出的环境变量NEXT_PUBLIC_URL,该变量可能可以在浏览器中的__URL处访问。我可能会考虑一个比url更有描述性的名字。
获取URL客户端的另一种方法是使用window.location.origin

相关问题