如何解决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
。
检查
,不幸的是,由于静态站点构建过程是在没有实际站点运行的情况下完成的,因此无法在此处访问完整URL。您只能在客户端的全局window
对象中访问完整的URL。
您还可以在Vercel为您的应用程序生成URL并从那里使用它之后设置环境变量。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。