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

【问题标题】：Next.js getServerSideProps use /api locally, in PR preview, and in productionNext.js getServerSideProps 在本地、PR 预览和生产中使用 /api
【发布时间】：2020-06-12 03:39:14
【问题描述】：

这几乎直接来自 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 替换为“动态”的东西？该站点可以在本地运行 (localhost)、由 Vercel 创建的预览 URL (something-random.now.sh)、另一个 Vercel URL (something-else.now.sh) 或自定义 URL (mydomain.com)。有没有办法确定如何在所有没有.env 文件的人上调用 Next.js /api？使用.env 文件，我不知道如何为 Vercel 为预览创建的“动态”URL（和其他 Vercel URL）设置它。

谢谢！

【问题讨论】：

你为什么不使用next.config.js文件？

标签： javascript reactjs next.js

【解决方案1】：

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

在 Vercel 中访问您的项目设置页面。
在“环境变量”部分，输入VERCEL_URL作为名称，将值留空，然后点击添加。李>
重复 Preview 环境。

您可以在以下位置了解有关系统环境变量的更多信息这个Vercel Docs。

然后，在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 才能工作，您可能需要其他解决方案。

【讨论】：

感谢@Hangindev，我错过了VERCEL_URL 环境变量。