接下来.js获取服务器端在本地、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 requestexport 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;当然，该代码在本地运行良好。但是，我如何根据网站的运行位置将 替换为“动态”内容？站点可以在本地运行（本地主机）、由 Vercel 创建的预览 URL（something-random.now.sh）、另一个 Vercel URL（something-else.now.sh）或自定义 URL（mydomain.com）。有没有办法确定如何在所有这些没有文件的人上调用 Next.js /api？对于该文件，我不知道如何为 Vercel 为预览创建的“动态”URL（以及其他 Vercel URL）设置它。http://localhost:3000.env.env

Answer 1

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

1. 访问 Vercel 中的项目设置页面。

2. 在“环境变量”部分中，输入名称，将值留空，然后单击添加。VERCEL_URL

3. 对预览环境重复上述步骤。

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

然后，在 内部，您可以获取带有 的 URL。getServerSidePropsprocess.env.VERCEL_URL

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

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

let baseUrl = ' 
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 才能正常工作，则可能需要另一种解决方案。