Skip to main content

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/).

In the following example, we will create an English 404 page at src/pages/en/404.js, and a German 404 page at /src/pages/de/404.js. Here is a simple example:

src/pages/en/404.js
import React from "react"
import Layout from "../../components/layout"
export default () => (
<Layout>
<h1>Page Not Found</h1>
<p>Oops, we couldn't find this page!</p>
</Layout>
)
src/pages/de/404.js
import React from "react"
import Layout from "../../components/layout"
export default () => (
<Layout>
<h1>Seite nicht gefunden</h1>
<p>Ups, wir konnten diese Seite nicht finden!</p>
</Layout>
)

Now, open up your project’s gatsby-node.js and add the following code:

gatsby-node.js
exports.onCreatePage = async ({ page, actions }) => {
const { createPage, deletePage } = actions
// Check if the page is a localized 404
if (page.path.match(/^\/[a-z]{2}\/404\/$/)) {
const oldPage = { ...page }
// Get the language code from the path, and match all paths
// starting with this code (apart from other valid paths)
const langCode = page.path.split(`/`)[1]
page.matchPath = `/${langCode}/*`
// Recreate the modified page
deletePage(oldPage)
createPage(page)
}
}

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.


Edit this page on GitHub
Docs
Tutorials
Plugins
Blog
Showcase