Localize 404 page

locales/de/translation.json

@@ -84,5 +84,10 @@
     },
     "sections": "Rubriken",
     "posts": "Beiträge"
+  },
+  "not_found": {
+      "title": "Nicht Gefunden",
+      "titleExt": "Seite Nicht Gefunden",
+      "text": "Ups... Diese Seite existiert nicht, also gehen wir am besten <1>zurück zur Startseite</1> und probieren es nochmal."
   }
 }

locales/en/translation.json

@@ -84,5 +84,10 @@
     },
     "sections": "Sections",
     "posts": "Posts"
+  },
+  "not_found": {
+      "title": "Not Found",
+      "titleExt": "Page Not Found",
+      "text": "Whoops... That page doesn't exist, so you may as well <1>go home</1>."
   }
 }

src/pages/404.js

@@ -1,16 +1,21 @@
 import * as React from "react";
-import { Link } from "gatsby-plugin-react-i18next";
+import { Link, useTranslation, Trans } from "gatsby-plugin-react-i18next";
 import Layout from "../layouts/default";
+import { graphql } from "gatsby";
 
 const NotFoundPage = () => {
+    const { t } = useTranslation();
+
     return (
-        <Layout title="Not found">
+        <Layout title={t("not_found.title")}>
             <section>
                 <article>
-                    <h1>Page not found</h1>
+                    <h1>{t("not_found.titleExt")}</h1>
                     <p>
-                        Whoops... That page doesn&apos;t exist, so you may as
+                        <Trans
-                        well <Link to="/">go home</Link>.
+                            i18nKey="not_found.text"
+                            components={{ 1: <Link to="/" /> }}
+                        />
                     </p>
                 </article>
             </section>
@@ -18,4 +23,18 @@ const NotFoundPage = () => {
     );
 };
 
+export const query = graphql`
+    query ($language: String) {
+        locales: allLocale(filter: { language: { eq: $language } }) {
+            edges {
+                node {
+                    ns
+                    data
+                    language
+                }
+            }
+        }
+    }
+`;
+
 export default NotFoundPage;