Next js如何在生产中获取绝对URL？

问题描述

我面临的问题是，使用getStaticPaths和getStaticProps时，无法在生产版本中获取绝对URL

export async function getStaticPaths() {
  const url =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000"
      : "https://websitename.vercel.app";
  const res = await fetch(`${url}/api/posts`);
  const posts = await res.json();
  console.log("posts: ",posts);

  const paths = posts.map(({ slug }) => ({
    params: { slug },}));

  console.log("Paths: ",paths);

  return { paths,fallback: false };
}

export async function getStaticProps({ params }) {
  console.log("params: ",params);
  const url =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000"
      : "https://websitename.vercel.app";
  const res = await fetch(`${url}/api/post`,{
    method: "POST",body: params.slug,});
  const post = await res.json();

  return {
    props: { post },};
}

它在开发版本中运行良好，但是在生产中却失败了，因为硬编码的https://websitename.vercel.app不是vercel生成的那个。 vercel生成的URL类似于websitename-q1hdjf6c2.vercel.app。

我该如何解决？ 预先感谢

解决方法

您可以使用 ${process.env.VERCEL_URL}/my/route。

检查

Vercel environment variables

,

不幸的是，由于静态站点构建过程是在没有实际站点运行的情况下完成的，因此无法在此处访问完整URL。您只能在客户端的全局window对象中访问完整的URL。

您还可以在Vercel为您的应用程序生成URL并从那里使用它之后设置环境变量。