Creating Prefixed 404 Pages for Different Languages
onCreatePage API in your project’s
gatsby-node.js file, it’s possible to create different 404 pages for different URL prefixes, such as
Here is an example that shows you how to create an English 404 page at
src/pages/en/404.js, and a German 404 page at
Now, open up your project’s
gatsby-node.js and add the following code:
Now, whenever Gatsby creates a page, it will check if the page is a localized 404 with a path in the format of
/XX/404/. If this is the case, then it will get the language code, and match all paths starting with this code, apart from other valid paths. This means that whenever you visit a non-existent page on your site, whose path starts with
/en/this-does-not-exist), your localized 404 page will be displayed instead.
For best results, you should configure your server to serve these 404 pages in the same manner - i.e. for
/en/<non existent path>, your server should serve the page
/en/404/. Otherwise, you’ll briefly see the default 404 page until the Gatsby runtime loads. If you’re using Netlify, you can use
gatsby-plugin-netlify to do this automatically. Note that you should still create a default 404 page (usually at
src/pages/404.js) to handle non-prefixed paths, e.g.