Can I set a route rule such that whenever my node function responds with a 404 status code, vercel responds with a 404.html static file?
#Route rules
coral oak
agile pierBOT
Hi @coral oak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you can set a route rule in Vercel to respond with a custom 404 page when your serverless function responds with a 404 status code. You can do this by adding a vercel.json file with routes configuration. Here is an example:
{
"routes": [
{ "handle": "filesystem" },
{ "src": "/(.*)", "status": 404, "dest": "/other-404.html" }
]
}
In this configuration, other-404.html is assigned as the 404 page for any path not matched in the filesystem. You can replace other-404.html with the path to your custom 404 page.
For more details, you can refer to the Vercel guide on custom 404 pages (https://vercel.com/guides/custom-404-page).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
coral oak
@agile pier
The linked document addresses the case where no other route has matched the request.
In my case, a serverless function has already matched the request, and will return a 404 response that needs to be rewritten after the fact.
agile pierBOT
Let me check the knowledge base for you. One moment! :books:
I see, you want to intercept a 404 response from a serverless function and respond with a custom 404 page. Unfortunately, based on the provided extracts, it seems that Vercel's routing system doesn't directly support this use case.
However, you can handle this within your serverless function itself. When your function determines that it needs to respond with a 404, you could instead render and return the contents of your custom 404 page. Here's an example of how you might do this:
module.exports = (req, res) => {
// ... your logic here ...
if (shouldRespondWith404) {
// Render and return your custom 404 page
const custom404Html = /* the HTML contents of your custom 404 page */;
res.status(404).send(custom404Html);
}
};
This way, whenever your function needs to respond with a 404, it will instead respond with your custom 404 page.