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”替换为“动态”？该站点可能正在本地运行（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）进行设置。

谢谢！

Answer 1

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

在Vercel中访问您的项目设置页面。
在“环境变量”部分中，输入VERCEL_URL作为名称，将值留空，然后单击添加。
针对预览环境进行重复。

您可以在中了解有关系统环境变量的更多信息这个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，则可能需要其他解决方案。

Next.js getServerSideProps在本地，PR预览版和生产环境中使用/ api

1 个答案: