如何在没有基本 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是带有“NEXT_PUBLIC_APP_URL”的

.env

，但即使创建

.env.local / .env / .env.development.local

并添加

env

变量，它也不会'不工作。

NEXT_PUBLIC_APP_URL=http://localhost:3000

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

Answer 1

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

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

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

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

看来使用方法正确。

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

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