From af999b8d8e7f27984cd20f68952663cbd0b60fe4 Mon Sep 17 00:00:00 2001
From: Andres Parra <byandrev@gmail.com>
Date: Fri, 18 Aug 2023 23:17:54 -0500
Subject: [PATCH] feature: add i18n

---
 .eslintrc.json                                |   5 +-
 package.json                                  |  12 +-
 src/app/{ => [lang]}/globals.css              |   0
 src/app/[lang]/layout.tsx                     |  39 ++++++
 src/app/[lang]/page.tsx                       |  30 +++++
 .../posts/[slug]/getPostService.ts            |   0
 src/app/{ => [lang]}/posts/[slug]/page.tsx    |   0
 src/app/{ => [lang]}/posts/page.tsx           |   3 +-
 src/app/i18n/client.ts                        |  59 ++++++++
 src/app/i18n/index.ts                         |  37 +++++
 src/app/i18n/locales/en/translation.json      |  15 +++
 src/app/i18n/locales/es/translation.json      |  15 +++
 src/app/i18n/settings.ts                      |  15 +++
 src/app/layout.tsx                            |  30 -----
 src/app/page.tsx                              |  34 -----
 src/components/Footer.tsx                     |  11 +-
 src/components/Header.tsx                     |  25 ++--
 src/components/LanguageSwitcher.tsx           | 100 ++++++++++++++
 src/components/Link.tsx                       |   7 +-
 src/components/ThemeSwitch.tsx                |   2 +-
 src/middleware.ts                             |  45 +++++++
 yarn.lock                                     | 126 +++++++++++++++++-
 22 files changed, 528 insertions(+), 82 deletions(-)
 rename src/app/{ => [lang]}/globals.css (100%)
 create mode 100644 src/app/[lang]/layout.tsx
 create mode 100644 src/app/[lang]/page.tsx
 rename src/app/{ => [lang]}/posts/[slug]/getPostService.ts (100%)
 rename src/app/{ => [lang]}/posts/[slug]/page.tsx (100%)
 rename src/app/{ => [lang]}/posts/page.tsx (99%)
 create mode 100644 src/app/i18n/client.ts
 create mode 100644 src/app/i18n/index.ts
 create mode 100644 src/app/i18n/locales/en/translation.json
 create mode 100644 src/app/i18n/locales/es/translation.json
 create mode 100644 src/app/i18n/settings.ts
 delete mode 100644 src/app/layout.tsx
 delete mode 100644 src/app/page.tsx
 create mode 100644 src/components/LanguageSwitcher.tsx
 create mode 100644 src/middleware.ts

diff --git a/.eslintrc.json b/.eslintrc.json
index bffb357..403e316 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react-hooks/rules-of-hooks": "off" // Checks rules of Hooks
+  }
 }
diff --git a/package.json b/package.json
index 74689e7..3876e1b 100644
--- a/package.json
+++ b/package.json
@@ -12,21 +12,31 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@formatjs/intl-localematcher": "^0.4.0",
     "@types/node": "20.4.5",
     "@types/react": "18.2.17",
     "@types/react-dom": "18.2.7",
+    "accept-language": "^3.0.18",
     "autoprefixer": "10.4.14",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
     "gray-matter": "^4.0.3",
+    "i18next": "^23.4.4",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next-resources-to-backend": "^1.1.4",
+    "negotiator": "^0.6.3",
     "next": "13.4.12",
+    "next-i18next": "^14.0.0",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-i18next": "^13.1.2",
     "remark": "^14.0.3",
     "remark-html": "^15.0.2",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@types/negotiator": "^0.6.1"
+  }
 }
diff --git a/src/app/globals.css b/src/app/[lang]/globals.css
similarity index 100%
rename from src/app/globals.css
rename to src/app/[lang]/globals.css
diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
new file mode 100644
index 0000000..bf4753e
--- /dev/null
+++ b/src/app/[lang]/layout.tsx
@@ -0,0 +1,39 @@
+import { dir } from "i18next";
+import { Inter } from "next/font/google";
+import { ReactNode } from "react";
+import "./globals.css";
+
+import Container from "@/components/Container";
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { ThemeProvider } from "@/context/ThemeContext";
+import { languages } from "@/app/i18n/settings";
+
+export async function generateStaticParams() {
+  return languages.map((lng) => ({ lng }));
+}
+
+const inter = Inter({ subsets: ["latin"] });
+
+type Props = {
+  children: ReactNode;
+  params: { lang: string };
+};
+
+async function RootLayout({ children, params: { lang } }: Props) {
+  return (
+    <html lang={lang} dir={dir(lang)}>
+      <body
+        className={`bg-white dark:bg-slate-900 text-gray-700 dark:text-gray-200 antialiased" ${inter.className}`}
+      >
+        <ThemeProvider>
+          <Header lang={lang} />
+          <Container>{children}</Container>
+          <Footer lang={lang} />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
+
+export default RootLayout;
diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
new file mode 100644
index 0000000..359b75b
--- /dev/null
+++ b/src/app/[lang]/page.tsx
@@ -0,0 +1,30 @@
+import { Metadata } from "next";
+
+import Container from "@/components/Container";
+import { useTranslation } from "../i18n";
+
+type Props = {
+  params: { lang: string };
+};
+
+export default async function Home({ params: { lang } }: Props) {
+  const { t } = await useTranslation(lang);
+
+  return (
+    <>
+      <Container>
+        <div className="space-y-6">
+          <h1 className="text-2xl font-bold">{t("title")}</h1>
+          <p>{t("description")}</p>
+          <p>{t("phrase")}</p>
+        </div>
+      </Container>
+    </>
+  );
+}
+
+export const metadata: Metadata = {
+  title: "Andres Parra - Software Engineer | @byandrev",
+  description:
+    "Desarrollador de software apasionado por la tecnología y el desarrollo web. | Andres Parra - Software Engineer | @byandrev",
+};
diff --git a/src/app/posts/[slug]/getPostService.ts b/src/app/[lang]/posts/[slug]/getPostService.ts
similarity index 100%
rename from src/app/posts/[slug]/getPostService.ts
rename to src/app/[lang]/posts/[slug]/getPostService.ts
diff --git a/src/app/posts/[slug]/page.tsx b/src/app/[lang]/posts/[slug]/page.tsx
similarity index 100%
rename from src/app/posts/[slug]/page.tsx
rename to src/app/[lang]/posts/[slug]/page.tsx
diff --git a/src/app/posts/page.tsx b/src/app/[lang]/posts/page.tsx
similarity index 99%
rename from src/app/posts/page.tsx
rename to src/app/[lang]/posts/page.tsx
index efb5bae..1e60b63 100644
--- a/src/app/posts/page.tsx
+++ b/src/app/[lang]/posts/page.tsx
@@ -1,6 +1,7 @@
+import { Metadata } from "next";
+
 import PostCard from "@/components/PostCard";
 import { getAllPosts } from "@/lib/getPosts";
-import { Metadata } from "next";
 
 export default function Posts() {
   const posts = getAllPosts(["slug", "title", "excerpt", "date"]);
diff --git a/src/app/i18n/client.ts b/src/app/i18n/client.ts
new file mode 100644
index 0000000..5c939cc
--- /dev/null
+++ b/src/app/i18n/client.ts
@@ -0,0 +1,59 @@
+"use client";
+
+import i18next from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import resourcesToBackend from "i18next-resources-to-backend";
+import { useEffect, useState } from "react";
+import {
+  initReactI18next,
+  useTranslation as useTranslationOrg,
+} from "react-i18next";
+
+import { getOptions, languages } from "./settings";
+
+const runsOnServerSide = typeof window === "undefined";
+
+//
+i18next
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .use(
+    resourcesToBackend(
+      (language: string, namespace: string) =>
+        import(`./locales/${language}/${namespace}.json`)
+    )
+  )
+  .init({
+    ...getOptions(),
+    lng: undefined, // let detect the language on client side
+    detection: {
+      order: ["path", "htmlTag", "cookie", "navigator"],
+    },
+    preload: runsOnServerSide ? languages : [],
+  });
+
+export function useTranslation(
+  lng: string,
+  ns: string = "translation",
+  options: any = {}
+) {
+  const ret = useTranslationOrg(ns, options);
+  const { i18n } = ret;
+  if (runsOnServerSide && lng && i18n.resolvedLanguage !== lng) {
+    i18n.changeLanguage(lng);
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [activeLng, setActiveLng] = useState(i18n.resolvedLanguage);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (activeLng === i18n.resolvedLanguage) return;
+      setActiveLng(i18n.resolvedLanguage);
+    }, [activeLng, i18n.resolvedLanguage]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (!lng || i18n.resolvedLanguage === lng) return;
+      i18n.changeLanguage(lng);
+    }, [lng, i18n]);
+  }
+  return ret;
+}
diff --git a/src/app/i18n/index.ts b/src/app/i18n/index.ts
new file mode 100644
index 0000000..f60876e
--- /dev/null
+++ b/src/app/i18n/index.ts
@@ -0,0 +1,37 @@
+import { createInstance, i18n } from "i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+import { TFunction } from "next-i18next";
+import { initReactI18next } from "react-i18next/initReactI18next";
+
+import { getOptions } from "./settings";
+
+const initI18next = async (lng: string, ns: string) => {
+  const i18nInstance = createInstance();
+  await i18nInstance
+    .use(initReactI18next)
+    .use(
+      resourcesToBackend(
+        (language: string, namespace: string) =>
+          import(`./locales/${language}/${namespace}.json`)
+      )
+    )
+    .init(getOptions(lng, ns));
+  return i18nInstance;
+};
+
+export async function useTranslation(
+  lng: string,
+  ns: string = "translation",
+  options: any = {}
+): Promise<{ t: TFunction; i18n: i18n }> {
+  const i18nextInstance = await initI18next(lng, ns);
+
+  return {
+    t: i18nextInstance.getFixedT(
+      lng,
+      Array.isArray(ns) ? ns[0] : ns,
+      options.keyPrefix
+    ),
+    i18n: i18nextInstance,
+  };
+}
diff --git a/src/app/i18n/locales/en/translation.json b/src/app/i18n/locales/en/translation.json
new file mode 100644
index 0000000..5e63c5e
--- /dev/null
+++ b/src/app/i18n/locales/en/translation.json
@@ -0,0 +1,15 @@
+{
+  "title": "Hi, I'm Andres Parra, Softwart Engineer",
+  "description": "I am a software developer passionate about technology and web development. I like to always be learning and sharing my knowledge, that's why this blog exists. Fan of open source and coffee ☕.",
+  "phrase": "Every line of code is an opportunity to create magic and bring innovative ideas to life. innovative ideas to life.",
+
+  "spanish": "Spanish",
+  "english": "English",
+
+  "menu": {
+    "about-me": "About me",
+    "posts": "Posts"
+  },
+
+  "footer": { "text": "Developed with 💙" }
+}
diff --git a/src/app/i18n/locales/es/translation.json b/src/app/i18n/locales/es/translation.json
new file mode 100644
index 0000000..8dcad07
--- /dev/null
+++ b/src/app/i18n/locales/es/translation.json
@@ -0,0 +1,15 @@
+{
+  "title": "Hola, soy Andres Parra, Softwart Engineer",
+  "description": "Soy un desarrollador de software apasionado por la tecnología y el desarrollo web. Me gusta siempre estar aprendiendo y compartiendo mis conocimientos, por eso existe este blog. Fan del open source y del café ☕.",
+  "phrase": "Cada línea de código es una oportunidad para crear magia y dar vida a ideas innovadoras.",
+
+  "spanish": "Español",
+  "english": "Ingles",
+
+  "menu": {
+    "about-me": "Sobre mí",
+    "posts": "Artículos"
+  },
+
+  "footer": { "text": "Desarrollado con 💙" }
+}
diff --git a/src/app/i18n/settings.ts b/src/app/i18n/settings.ts
new file mode 100644
index 0000000..4c5a8a1
--- /dev/null
+++ b/src/app/i18n/settings.ts
@@ -0,0 +1,15 @@
+export const fallbackLng = "es";
+export const languages = [fallbackLng, "en"];
+export const defaultNS = "translation";
+
+export function getOptions(lng = fallbackLng, ns = defaultNS) {
+  return {
+    // debug: true,
+    supportedLngs: languages,
+    fallbackLng,
+    lng,
+    fallbackNS: defaultNS,
+    defaultNS,
+    ns,
+  };
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
deleted file mode 100644
index e4bec9a..0000000
--- a/src/app/layout.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-import Container from "@/components/Container";
-import Footer from "@/components/Footer";
-import Header from "@/components/Header";
-import { ThemeProvider } from "../context/ThemeContext";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="es">
-      <body
-        className={`bg-white dark:bg-slate-900 text-gray-700 dark:text-gray-200 antialiased" ${inter.className}`}
-      >
-        <ThemeProvider>
-          <Header />
-          <Container>{children}</Container>
-          <Footer />
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
deleted file mode 100644
index 5e13411..0000000
--- a/src/app/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Container from "@/components/Container";
-import { Metadata } from "next";
-
-export default function Home() {
-  return (
-    <>
-      <Container>
-        <div className="space-y-6">
-          <h1 className="text-2xl font-bold">
-            Hola, soy Andres Parra, Softwart Engineer
-          </h1>
-
-          <p>
-            Soy un desarrollador de software apasionado por la tecnología y el
-            desarrollo web. Me gusta siempre estar aprendiendo y compartiendo
-            mis conocimientos, por eso existe este blog. Fan del open source y
-            del café ☕.
-          </p>
-
-          <p>
-            Cada línea de código es una oportunidad para crear magia y dar vida
-            a ideas innovadoras.
-          </p>
-        </div>
-      </Container>
-    </>
-  );
-}
-
-export const metadata: Metadata = {
-  title: "Andres Parra - Software Engineer | @byandrev",
-  description:
-    "Desarrollador de software apasionado por la tecnología y el desarrollo web. | Andres Parra - Software Engineer | @byandrev",
-};
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 58318f8..a6446cd 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,12 +1,17 @@
+"use client";
+
+import { useTranslation } from "@/app/i18n/client";
 import Container from "@/components/Container";
-import Link from "./Link";
+import Link from "@/components/Link";
+
+function Footer({ lang }: { lang: string }) {
+  const { t } = useTranslation(lang);
 
-function Footer() {
   return (
     <footer className="py-6 text-sm mt-10">
       <Container>
         <div className="flex justify-between">
-          <p>Desarrollado con 💙</p>
+          <p>{t("footer.text")}</p>
 
           <p>
             <Link href="https://github.com/byandrev/blog" target="_blank">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index a4b7357..87a08b1 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,22 +1,31 @@
+"use client";
+
+import { useTranslation } from "@/app/i18n/client";
 import Container from "@/components/Container";
-import Link from "./Link";
-import ThemeSwitch from "./ThemeSwitch";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
+import Link from "@/components/Link";
+import ThemeSwitch from "@/components/ThemeSwitch";
+
+function Header({ lang }: { lang: string }) {
+  const { t } = useTranslation(lang);
 
-function Header() {
   return (
     <header className="py-6 mb-6">
       <Container>
         <nav className="flex justify-between">
           <div className="flex space-x-4 j">
-            <Link href="/" color="text-inherit">
-              Sobre mí
+            <Link href={`/${lang}`} color="text-inherit">
+              {t("menu.about-me")}
             </Link>
-            <Link href="/posts" color="text-inherit">
-              Artículos
+            <Link href={`/${lang}/posts`} color="text-inherit">
+              {t("menu.posts")}
             </Link>
           </div>
 
-          <ThemeSwitch />
+          <div className="flex gap-2">
+            <LanguageSwitcher lang={lang} />
+            <ThemeSwitch />
+          </div>
         </nav>
       </Container>
     </header>
diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
new file mode 100644
index 0000000..9e5a713
--- /dev/null
+++ b/src/components/LanguageSwitcher.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { useTranslation } from "@/app/i18n/client";
+import { languages } from "@/app/i18n/settings";
+
+export default function LanguageSwitcher({ lang }: { lang: string }) {
+  const { t } = useTranslation(lang);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleLanguageChange = (language: string) => {
+    const data = pathname.split("/").filter((el) => el.length > 0);
+    data[0] = language;
+    router.push(`/${data.join("/")}`);
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        type="button"
+        className="inline-flex gap-2 items-center justify-center w-full rounded-md px-2 py-0 h-[23px] bg-gray-200 text-xs font-medium text-gray-700 dark:bg-slate-800 dark:text-gray-200"
+        id={lang}
+        aria-expanded={isOpen}
+      >
+        <Image
+          src={
+            lang === "es"
+              ? "https://flagicons.lipis.dev/flags/4x3/es.svg"
+              : "https://flagicons.lipis.dev/flags/4x3/us.svg"
+          }
+          width={15}
+          height={15}
+          alt={lang === "es" ? t("spanish") : t("english")}
+        />
+
+        {lang.toLocaleUpperCase()}
+
+        <svg
+          className="h-5 w-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10.293 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L10 12.586l3.293-3.293a1 1 0 011.414 1.414l-4 4z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div
+          className="origin-top-right absolute right-0 mt-2 w-96 rounded-md shadow-lg bg-white dark:bg-slate-700 ring-1 ring-black ring-opacity-5"
+          role="menu"
+          aria-orientation="vertical"
+        >
+          <div className="p-1 grid grid-cols-2 gap-2" role="none">
+            {languages.map((language) => {
+              return (
+                <button
+                  key={language}
+                  onClick={() => handleLanguageChange(language)}
+                  className={`${
+                    lang === language
+                      ? "bg-gray-100 text-gray-700 dark:text-gray-200 dark:bg-slate-800"
+                      : "text-gray-700 dark:text-gray-200"
+                  } rounded-md block px-4 py-2 text-sm text-start items-center inline-flex hover:bg-gray-100 dark:hover:bg-slate-800 `}
+                  role="menuitem"
+                >
+                  <span className="truncate flex gap-2">
+                    <Image
+                      src={
+                        language === "es"
+                          ? "https://flagicons.lipis.dev/flags/4x3/es.svg"
+                          : "https://flagicons.lipis.dev/flags/4x3/us.svg"
+                      }
+                      width={20}
+                      height={20}
+                      alt={language === "es" ? t("spanish") : t("english")}
+                    />
+                    {language === "es" ? t("spanish") : t("english")}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 3806a0f..ae018fc 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -1,5 +1,7 @@
-import { FC, ReactNode } from "react";
+"use client";
+
 import LinkNext from "next/link";
+import { FC, ReactNode } from "react";
 
 type LinkProps = {
   children: ReactNode;
@@ -22,7 +24,8 @@ const Link: FC<LinkProps> = ({
     <LinkNext
       className={`${color || "text-sky-700"} hover:underline ${className}`}
       as={as}
-      href={href}
+      href={href} 
+      locale={false}
       target={target}
     >
       {children}
diff --git a/src/components/ThemeSwitch.tsx b/src/components/ThemeSwitch.tsx
index c213e93..180a4af 100644
--- a/src/components/ThemeSwitch.tsx
+++ b/src/components/ThemeSwitch.tsx
@@ -28,7 +28,7 @@ const ThemeSwitch = () => {
             checked={isChecked}
             onChange={handleCheckboxChange}
           />
-          <div className="block h-6 w-10 rounded-full bg-[#eee]"></div>
+          <div className="block h-6 w-10 rounded-full bg-gray-200 dark:bg-slate-800"></div>
           <div
             className={`dot absolute top-1 h-4 w-4 rounded-full ${
               theme === "dark"
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..ce3bd10
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,45 @@
+import acceptLanguage from "accept-language";
+import { NextRequest, NextResponse } from "next/server";
+
+import { fallbackLng, languages } from "@/app/i18n/settings";
+
+acceptLanguage.languages(languages);
+
+export const config = {
+  // matcher: '/:lng*'
+  matcher: ["/((?!api|_next/static|_next/image|assets|favicon.ico|sw.js).*)"],
+};
+
+const cookieName = "i18next";
+
+export function middleware(req: NextRequest) {
+  let lng;
+  if (req.cookies.has(cookieName)) {
+    lng = acceptLanguage.get(req.cookies.get(cookieName)?.value);
+  }
+
+  if (!lng) lng = acceptLanguage.get(req.headers.get("Accept-Language"));
+  if (!lng) lng = fallbackLng;
+
+  // Redirect if lng in path is not supported
+  if (
+    !languages.some((loc) => req.nextUrl.pathname.startsWith(`/${loc}`)) &&
+    !req.nextUrl.pathname.startsWith("/_next")
+  ) {
+    return NextResponse.redirect(
+      new URL(`/${lng}${req.nextUrl.pathname}`, req.url)
+    );
+  }
+
+  if (req.headers.has("referer")) {
+    const refererUrl = new URL(req.headers.get("referer") || "");
+    const lngInReferer = languages.find((l) =>
+      refererUrl.pathname.startsWith(`/${l}`)
+    );
+    const response = NextResponse.next();
+    if (lngInReferer) response.cookies.set(cookieName, lngInReferer);
+    return response;
+  }
+
+  return NextResponse.next();
+}
diff --git a/yarn.lock b/yarn.lock
index ff32423..f84f694 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,6 +12,13 @@
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
+"@babel/runtime@^7.19.4", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.5", "@babel/runtime@^7.22.5":
+  version "7.22.10"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
+  integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.20.7":
   version "7.22.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
@@ -51,6 +58,13 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6"
   integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==
 
+"@formatjs/intl-localematcher@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.4.0.tgz#63bbc37a7c3545a1bf1686072e51d9a3aed98d6b"
+  integrity sha512-bRTd+rKomvfdS4QDlVJ6TA/Jx1F2h/TBVO5LjvhQ7QPPHp19oPNMIum7W2CMEReq/zPxpmCeB31F9+5gl/qtvw==
+  dependencies:
+    tslib "^2.4.0"
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
@@ -223,6 +237,14 @@
   dependencies:
     "@types/unist" "^2"
 
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -240,6 +262,11 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
+"@types/negotiator@^0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@types/negotiator/-/negotiator-0.6.1.tgz#4c75543f6ef87f427f4705e731a933595b7397f5"
+  integrity sha512-c4mvXFByghezQ/eVGN5HvH/jI63vm3B7FiE81BUzDAWmuiohRecCO6ddU60dfq29oKUMiQujsoB2h0JQC7JHKA==
+
 "@types/node@20.4.5":
   version "20.4.5"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.5.tgz#9dc0a5cb1ccce4f7a731660935ab70b9c00a5d69"
@@ -334,6 +361,14 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
+accept-language@^3.0.18:
+  version "3.0.18"
+  resolved "https://registry.yarnpkg.com/accept-language/-/accept-language-3.0.18.tgz#f5025f17bf65a466a845838ccf98cdb877d83384"
+  integrity sha512-sUofgqBPzgfcF20sPoBYGQ1IhQLt2LSkxTnlQSuLF3n5gPEqd5AimbvOvHEi0T1kLMiGVqPWzI5a9OteBRth3A==
+  dependencies:
+    bcp47 "^1.1.2"
+    stable "^0.1.6"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -525,6 +560,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+bcp47@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/bcp47/-/bcp47-1.1.2.tgz#354be3307ffd08433a78f5e1e2095845f89fc7fe"
+  integrity sha512-JnkkL4GUpOvvanH9AZPX38CxhiLsXMBicBY2IAtqiVN8YulGDQybUydWA4W6yAMtw6iShtw+8HEF6cfrTHU+UQ==
+
 big-integer@^1.6.44:
   version "1.6.51"
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
@@ -679,6 +719,11 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+core-js@^3:
+  version "3.32.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.32.1.tgz#a7d8736a3ed9dd05940c3c4ff32c591bb735be77"
+  integrity sha512-lqufgNn9NLnESg5mQeYsxQP5w7wrViSj0jr/kv6ECQiByzQkrn1MKvV0L3acttpDqfQrHLwr2KCMgX5b8X+lyQ==
+
 cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -1541,6 +1586,20 @@ hastscript@^7.0.0:
     property-information "^6.0.0"
     space-separated-tokens "^2.0.0"
 
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
 html-void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-2.0.1.tgz#29459b8b05c200b6c5ee98743c41b979d577549f"
@@ -1556,6 +1615,32 @@ human-signals@^4.3.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
   integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
 
+i18next-browser-languagedetector@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.1.0.tgz#01876fac51f86b78975e79b48ccb62e2313a2d7d"
+  integrity sha512-cr2k7u1XJJ4HTOjM9GyOMtbOA47RtUoWRAtt52z43r3AoMs2StYKyjS3URPhzHaf+mn10hY9dZWamga5WPQjhA==
+  dependencies:
+    "@babel/runtime" "^7.19.4"
+
+i18next-fs-backend@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/i18next-fs-backend/-/i18next-fs-backend-2.1.5.tgz#03347eacde6a35b599da1889a048ae63bcf0c687"
+  integrity sha512-7fgSH8nVhXSBYPHR/W3tEXXhcnwHwNiND4Dfx9knzPzdsWTUTL/TdDVV+DY0dL0asHKLbdoJaXS4LdVW6R8MVQ==
+
+i18next-resources-to-backend@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/i18next-resources-to-backend/-/i18next-resources-to-backend-1.1.4.tgz#d139ca0cacc270dcc90b7926e192f4cd5aa4db60"
+  integrity sha512-hMyr9AOmIea17AOaVe1srNxK/l3mbk81P7Uf3fdcjlw3ehZy3UNTd0OP3EEi6yu4J02kf9jzhCcjokz6AFlEOg==
+  dependencies:
+    "@babel/runtime" "^7.21.5"
+
+i18next@^23.4.4:
+  version "23.4.4"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.4.4.tgz#ec8fb2b5f3c5d8e3bf3f8ab1b19e743be91300e0"
+  integrity sha512-+c9B0txp/x1m5zn+QlwHaCS9vyFtmIAEXbVSFzwCX7vupm5V7va8F9cJGNJZ46X9ZtoGzhIiRC7eTIIh93TxPA==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+
 ignore@^5.2.0, ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
@@ -2243,6 +2328,22 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+negotiator@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+next-i18next@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/next-i18next/-/next-i18next-14.0.0.tgz#fd637c81df96c9d6f2cc4716037130ac4e5d6968"
+  integrity sha512-umv8hOZoSoAA+td3ErfemyO/5Ib2pnYCdQ8/Oy+fncS2skFIL3hHKRer3Oa3Nfm4Xbv5p6DHWzm3NhT1j4tWwg==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    core-js "^3"
+    hoist-non-react-statics "^3.3.2"
+    i18next-fs-backend "^2.1.5"
+
 next@13.4.12:
   version "13.4.12"
   resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df"
@@ -2589,7 +2690,15 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-is@^16.13.1:
+react-i18next@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.1.2.tgz#dbb1b18c364295af2a9072333ee4e0b43cbc2da8"
+  integrity sha512-D/OJ/8ZQYscabsvbCAiOgvJq8W3feQF/VIV0to1w7V7UvrUE1IZ3hcalOckUYvKBd7BP3b8EPm+hop3J8sS+Mw==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+    html-parse-stringify "^3.0.1"
+
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -2620,6 +2729,11 @@ regenerator-runtime@^0.13.11:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz#fe7ce25e7e4cca8db37b6634c8a2c7009199b9cb"
@@ -2835,6 +2949,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+stable@^0.1.6:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
 streamsearch@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
@@ -3250,6 +3369,11 @@ vfile@^5.0.0:
     unist-util-stringify-position "^3.0.0"
     vfile-message "^3.0.0"
 
+void-elements@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 watchpack@2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"