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

Question

我一直在玩Shadcn 的Taxinomy项目。

对内部 API 的获取调用不包括应用程序的基本 URL（http://localhost:3000或用于生产的实际网站）。

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

我一直在尝试在 Next.JS 13.4 项目上复制该行为，但没有成功。

该next.config文件不包含任何特定的配置，唯一提到的应用程序 URL 是.env“NEXT_PUBLIC_APP_URL”，但即使创建.env.local / .env / .env.development.local并添加env变量，它也不起作用。

NEXT_PUBLIC_APP_URL=http://localhost:3000

知道如何在不需要基本 URL 的情况下调用 API 吗？

Answer 1

NEXT_PUBLIC_APP_URL 只是一个环境变量。它不是在 NextJS 中实现特定行为的特殊值。

将 URL 传递给 fetch 函数时，如果传递 PATH 而不是整个 URL，则当前网页的 URL 会自动添加在前面。

但是，这无法在服务器组件中完成，因为它不在浏览器中运行。

我还查看了分类学项目。客户端组件中使用的 fetch 函数将路径作为参数传递，服务器组件中使用的 fetch 函数将完整的 URL 作为参数传递。

看来它的使用方式是正确的。

如果您只想在服务器组件中输入 PATH 而不是完整的 URL，有一种方法可以再次移植 fetch 函数。

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