SHIP IT FASTER

The average enterprise on Netlify ships 140 times per week. Where does your team rank?

Creating Prefixed 404 Pages for Different Languages

Using the onCreatePage API in your project’s gatsby-node.js file, it’s possible to create different 404 pages for different URL prefixes, such as /en/).

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 /src/pages/de/404.js:

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/ or /de/ (e.g. /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. https://example.com/this-does-not-exist.

Start building today on Gatsby Cloud!
Edit this page on GitHub
© 2023 Gatsby, Inc.