Zero Configuration Deployments
In most cases, creating and deploying a custom 404 page for your application will work without any additional configuration.
If you wish to create a custom 404 page, you should follow your framework's documentation.
- Next.js: Customizing the 404 Page
- Gatsby: Adding a 404 page
- Hugo: Custom 404 Page
- Jekyll: Custom 404 Page
- Eleventy: Adding a 404 Not Found Page
- Docusaurus: Custom Pages
What If My Framework Doesn't Support a Custom 404 Page?
If your framework doesn't support a custom 404 page, there are a couple solutions depending on the type of framework you're using, SPA or SSG.
Single Page Application (SPA)
These applications have a single page (index.html
) and only support client-side routing. You can configure your router to handle the case when no route is matched, usually called a wildcard.
- Create React App: No Match (404) with react-router-dom
- Vue: Catch all / 404 Not found Route
- Ember: Wildcard / globbing routes
Static Site Generator (SSG)
These applications generate multiple HTML pages (index.html
, about.html
, etc) during the Build Step.
Emit a 404.html
file to your Output Directory and it will be served as the 404 page when a route does not match any other static file.
What If I Need a Custom 404 API Response?
Instead of serving HTML, you may want to serve JSON or other formats when an API does not exist.
First, create a Serverless Function that sets the status code to 404 and responds with a message body of your choice.
1module.exports = (req, res) => {2 res.status(404).json({ message: 'Not Found' });3};
Then, add an entry at the bottom of rewrites in vercel.json
to ensure that the 404 Serverless Function will execute if nothing else matches in the /api
directory.
1{2 "rewrites": [{ "source": "/api/(.*)", "destination": "/api/404.js" }]3}
This means that visiting /api/does-not-exist
will respond with a JSON 404 and visiting /does-not-exist
will respond with a HTML 404 (the 404.html
from the earlier section).
What If I Need to Name My 404 File Something Different?
If you need to assign a different file as the custom 404 page, you can add a vercel.json
file with routes
.
1{2 "routes": [3 { "handle": "filesystem" },4 { "src": "/(.*)", "status": 404, "dest": "/other-404.html" }5 ]6}