Table of Contents
The Problem
Today I'm going to cover an issue that I ran into after deploying my site to Netlify. The problem is that if someone were to go to a blog post that didn't exist, like https://joelmturner.com/blog/abc, they would receive a 500 error message. Since it's a 500 from the server, the client doesn't spin up and I can't see which page was trying to be accessed.
This had me searching all over for the root cause since it all worked locally and I would expect that it would just throw a 404 error like other missing pages. Finally, after searching for quite some time, I came across a GitHub issue that resembled my problem. Sure enough, hu0p had a workaround that worked for me as well.
The factors that lead to this issue are:
- Hosted on Netlify
- Running the Essential Next.js plugin (the culprit)
- Static site build of Nextjs
- Have some dynamic routes like
pages/blog/[id].tsx
- Hit a route that doesn't exist on that dynamic route
The Solution
By wrapping the data fetching with a try/catch, we are able to return notFound: true
which will trigger the 404 page. I wasn't aware that notFound
was a return value until I saw this workaround.
Instead of:
export async function getStaticProps({ params }) {
const postData = await getPostData(params.id);
return {
props: {
...postData,
},
};
}
We use try/catch:
export async function getStaticProps({ params }) {
let postData;
try {
postData = await getPostData(params.id);
} catch (e) {
console.error(e);
return {
notFound: true,
};
}
return {
props: {
...postData,
},
};
}