在构建和部署时，如何从Nextjs API路由中获取数据

Question

我正在尝试将我的nextjs web应用程序部署到vercel。

当我部署我的网站时，我会得到这个：

> Build error occurred
FetchError: request to http://localhost:3000/api/products failed, reason: connect ECONNREFUSED 127.0.0.1:3000

这里我在localhost:3000上获取数据，它在npm run dev时工作。但现在我想构建和部署我的项目，我再也无法从localhost中获取，而且我还不知道我的域名。那么，当vercel正在构建我的站点时，我如何从我的API路由中获取数据？

export const getStaticPaths = async () => {
const res = await fetch("http://localhost:3000/api/products");
const products = await res.json();
const paths = products.map((product) => ({
params: { productId: product.id },
}));
return {
paths: paths,
fallback: false,
};
};
export const getStaticProps = async (context) => {
const res = await fetch(
`http://localhost:3000/api/products/${context.params.productId}`
);
const product = await res.json();
return {
props: {
product,
},
};
};

Answer 1

如果前端和后端在同一服务器/域上运行/托管。您不必指定主机名，它将指向与客户端相同的域。

export const getStaticPaths = async () => {
const res = await fetch("/api/products");
// something
};

或

您可以为主机使用env变量。在项目根目录上创建.env文件。https://nextjs.org/docs/basic-features/environment-variables#exposing-环境变量到浏览器

.env

NEXT_PUBLIC_ENV = development;

组件

export const getStaticPaths = async () => {
const url =
"development" === process.env.NEXT_PUBLIC_ENV
? "http://localhost:3000/api/products"
: "https://example.com/api/products";
const res = await fetch(url);
// something
};