Fixed redirection for non existing locales

Author: albbus-stack

components/pages/404.tsx

@@ -0,0 +1,15 @@
+import Link from "next/link";
+
+export default function PageNotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center w-full h-screen gap-5 text-lg">
+      404: Page Not Found
+      <Link
+        href="/"
+        className="px-4 py-2 bg-gray-300 rounded-md hover:opacity-70"
+      >
+        Go Back
+      </Link>
+    </div>
+  );
+}

pages/[locale]/about.tsx

@@ -2,13 +2,22 @@ import { NextPage } from "next";
 import AboutPage from "../../components/pages/about";
 import {
   AvailableLanguageTag,
+  availableLanguageTags,
   setLanguageTag,
 } from "../../src/paraglide/runtime";
 import { useRouter } from "next/router";
+import PageNotFound from "../../components/pages/404";
 
 const About: NextPage = () => {
   const router = useRouter();
-  setLanguageTag(router.query.locale as AvailableLanguageTag);
+
+  if (
+    availableLanguageTags.includes(router.query.locale as AvailableLanguageTag)
+  ) {
+    setLanguageTag(router.query.locale as AvailableLanguageTag);
+  } else if (router.query.locale) {
+    return <PageNotFound />;
+  }
 
   return <AboutPage />;
 };

pages/[locale]/index.tsx

@@ -2,13 +2,22 @@ import { NextPage } from "next";
 import HomePage from "../../components/pages/home";
 import {
   AvailableLanguageTag,
+  availableLanguageTags,
   setLanguageTag,
 } from "../../src/paraglide/runtime";
 import { useRouter } from "next/router";
+import PageNotFound from "../../components/pages/404";
 
 const Home: NextPage = () => {
   const router = useRouter();
-  setLanguageTag(router.query.locale as AvailableLanguageTag);
+
+  if (
+    availableLanguageTags.includes(router.query.locale as AvailableLanguageTag)
+  ) {
+    setLanguageTag(router.query.locale as AvailableLanguageTag);
+  } else if (router.query.locale) {
+    return <PageNotFound />;
+  }
 
   return <HomePage />;
 };