Next.js getServerSideProps 在本地、PR 预览和生产中使用 /api

Question

这几乎直接来自 Next.js 站点上的一些示例。

function HomePage(props) {
  return (
    <div>
      <p>Welcome to {props.data.name} Next.js!</p>
      <img src="/conexon-logo-white.png" alt="my image" />
    </div>
  );
}

// This gets called on every request
export async function getServerSideProps(context) {
  const res = await fetch('http://localhost:3000/api/test');
  const data = await res.json();

  // Pass data to the page via props
  return { props: { data } };
}

export default HomePage;

当然，该代码在本地工作得很好。 但是如何根据站点的运行位置将http://localhost:3000替换为“动态”的东西？ The site could be running locally (localhost), a preview URL created by Vercel (something-random.now.sh), another Vercel URL (something-else.now.sh), or a custom URL (mydomain.com). 有没有办法确定如何在所有没有.env文件的人上调用 Next.js /api ？ 使用.env文件，我不知道如何为 Vercel 创建的“动态” URL 设置它以进行预览（以及其他 Vercel URL）。

谢谢！

Answer 1

您可以通过设置由 Vercel 填充的系统环境变量VERCEL_URL来获取部署的 URL。

1. 访问 Vercel 中的项目设置页面。
2. 在“环境变量”部分中，输入VERCEL_URL作为Name ，将Value留空，然后单击Add 。
3. 重复预览环境。

您可以在此Vercel 文档中了解有关系统环境变量的更多信息。

然后，在getServerSideProps中，您可以使用process.env.VERCEL_URL获取 URL。

请注意，使用此方法，您可以获得不同环境下的预览 URL(something-random.now.sh) 和生产 URL(something-else.now.sh)。 但是当您访问您的自定义域（exmaple.com）时，您仍然会得到生产 URL。

如果您仅使用自定义 URL 而不是 Vercel 的生产 URL，则此解决方案可能已经足够了：

let baseUrl = 'http://localhost:3000'
if(process.env.Vercel_URL) {
  baseUrl = process.env.Vercel_URL === 'https://something-else.now.sh'? 'https://exmaple.com': process.env.Vercel_URL
}

如果您需要定制 URL 和 Vercel 的生产 URL 来工作，您可能需要另一种解决方案。