如何在没有基本URL的情况下在Next.JS 13中进行API内部调用?

63lcw9qa  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(125)

我一直在玩Shadcn的Taxinomy项目。
对内部API的获取调用不包括应用的基本URL(http://localhost:3000或实际的生产网站)。

// Get stipe checkout URL
const response = await fetch("/api/users/stripe")

我一直试图在我的Next.JS 13.4项目中复制这种行为,但没有任何运气。
next.config文件不包括任何特定的配置,唯一提到的APP URL是带有“NEXT_PUBLIC_APP_URL”的.env,但即使在创建.env.local / .env / .env.development.local并添加env变量时,它也不起作用。

NEXT_PUBLIC_APP_URL=http://localhost:3000

有没有办法在不需要基本URL的情况下调用API?

5q4ezhmt

5q4ezhmt1#

NEXT_PUBLIC_APP_URL只是一个环境变量。它不是在NextJS中实现特定行为的特殊值。
当向fetch函数传递URL时,如果传递的是PATH而不是整个URL,则当前网页的URL会自动添加到前面。
但是,这不能在服务器组件中完成,因为它不在浏览器中运行。
我也看了一下Taxinomy项目。客户端组件中使用的fetch函数将path作为参数传递,服务器组件中使用的fetch函数将完整的URL作为参数传递。
它似乎以正确的方式使用。
如果你想在服务器组件中只输入PATH而不是完整的URL,有一种方法可以再次移植fetch函数。

const http = (url, other) => return fetch(process.env.BASEURL+url, other)

相关问题