Next js Как получить абсолютный URL в продакшене?

Question

Проблема, с которой я столкнулся, заключается в том, что я не могу получить абсолютный URL-адрес в производственной сборке при использовании getStaticPaths а также getStaticProps

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. URL-адрес, созданныйvercel что-то вроде этого websitename-q1hdjf6c2.vercel.app.

Как это исправить? заранее спасибо

Answer 1

К сожалению, поскольку процесс создания статического сайта выполняется без фактического запуска сайта, полный URL-адрес там недоступен. Вы можете получить доступ только к полному URL-адресу на стороне клиента в глобальномwindow объект.

Вы также можете установить переменную среды после того, как Vercel сгенерирует URL-адрес для вашего приложения и использовать его оттуда.

Answer 2

вы можете использовать ${process.env.VERCEL_URL}/my/route.

Проверять

Переменные среды Vercel

Answer 3

Кажется, это работает

...

      const router = useRouter();

...

      const origin =
    typeof window !== "undefined" && window.location.origin
      ? window.location.origin
      : "";

url = origin + router.asPath;

или

      import { useRouter } from "next/router";

...

      const {asPath} = useRouter();

...

      const url = process.env.NEXT_PUBLIC_DOMAIN + asPath;

... .env

      NEXT_PUBLIC_DOMAIN='https://webaddress.com'