我正在使用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函数获取内容不起作用。
1条答案
按热度按时间cgh8pdjw1#
我怀疑这是一个表单提交处理程序,所以它在客户端处理。
客户端组件不能访问
process
,这是一个node.js API。您可以使用导出的环境变量
NEXT_PUBLIC_URL
,该变量可能可以在浏览器中的__URL
处访问。我可能会考虑一个比url更有描述性的名字。获取URL客户端的另一种方法是使用window.location.origin