In my implementation of a Next JS app, I am fetching data from Sanity to generate dynamic routes as shown below:
export const getStaticPaths = async () => {
const res = await client.fetch(`*[_type in ["work"] ]`);
const data = await res;
const paths = data.map((e) => {
return {
params: { slug: e.slug.current },
};
});
return {
paths,
fallback: false,
};
};
export const getStaticProps = async (context) => {
const slug = context.params.slug;
const res = await client.fetch(`*[_type == "work" && slug.current == "${slug}"]
`);
const data = await res;
const resAll = await client.fetch(`*[_type == "work"] | order(order asc)`);
const dataAll = await resAll;
return {
props: {
post: data[0],
dataAll,
},
revalidate: 1, // 10 seconds
};
};
While everything works smoothly and quickly on localhost, I encounter a 404 error for every newly generated route on Netlify. The page only shows up after a redeploy.
The directory structure where this is happening looks like this:
-works
----[slug].jsx
----index.jsx
I'm facing issues with Netlify not recognizing new paths immediately and changes in content reflecting slowly. I attempted creating a build hook in Netlify to trigger server builds upon content changes, but it feels like a temporary fix. Is there a more efficient solution to address this problem?