Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
132
rated 0 times [  136] [ 4]  / answers: 1 / hits: 13544  / 4 Years ago, mon, august 31, 2020, 12:00:00

The problem I'm facing is that I'm unable to get the absolute URL in the production build when using getStaticPaths and 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 },
};
}

It works fine in the development build but when it comes to production it fails because the hardcoded https://websitename.vercel.app is not the one generated by vercel. The URL generated by vercel is something like this websitename-q1hdjf6c2.vercel.app.


How do I fix this?


More From » reactjs

 Answers
9

you can use ${process.env.VERCEL_URL}/my/route.


Check


Vercel environment variables


[#2774] Thursday, August 27, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
terrellhunterm

Total Points: 82
Total Questions: 109
Total Answers: 98

Location: Vietnam
Member since Sun, Oct 18, 2020
4 Years ago
terrellhunterm questions
;