Update middleware logic (lukevella#263)

package.json

@@ -25,6 +25,7 @@
     "@trpc/next": "^9.23.2",
     "@trpc/react": "^9.23.2",
     "@trpc/server": "^9.23.2",
+    "accept-language-parser": "^1.5.0",
     "axios": "^0.24.0",
     "clsx": "^1.1.1",
     "dayjs": "^1.11.3",
@@ -58,6 +59,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.22.2",
+    "@types/accept-language-parser": "^1.5.3",
     "@types/lodash": "^4.14.178",
     "@types/nodemailer": "^6.4.4",
     "@types/react": "^17.0.5",

src/components/home/hero.tsx

@@ -1,5 +1,5 @@
+/* eslint-disable @next/next/no-html-link-for-pages */
 import { motion } from "framer-motion";
-import Link from "next/link";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 
@@ -27,22 +27,22 @@ const Hero: React.VoidFunctionComponent = () => {
         </h1>
         <div className="mb-12 text-xl text-gray-400">{t("heroSubText")}</div>
         <div className="space-x-3">
-          <Link href="/new" locale={false}>
-            <a className="rounded-lg bg-primary-500 px-5 py-3 font-semibold text-white shadow-sm  transition-all hover:bg-primary-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2  focus:ring-primary-200 active:bg-primary-600/90">
-              {t("getStarted")}
-            </a>
-          </Link>
-          <Link href="/demo" locale={false}>
-            <a
-              className="rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm  transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2  focus:ring-primary-200 active:bg-slate-600/90"
-              rel="nofollow"
-            >
-              {t("liveDemo")}
-            </a>
-          </Link>
+          <a
+            href="/new"
+            className="rounded-lg bg-primary-500 px-5 py-3 font-semibold text-white shadow-sm  transition-all hover:bg-primary-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2  focus:ring-primary-200 active:bg-primary-600/90"
+          >
+            {t("getStarted")}
+          </a>
+          <a
+            href="/demo"
+            className="rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm  transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2  focus:ring-primary-200 active:bg-slate-600/90"
+            rel="nofollow"
+          >
+            {t("liveDemo")}
+          </a>
         </div>
       </div>
-      <div className="pointer-events-none mt-24 hidden h-[380px] select-none items-end justify-center md:flex lg:mt-8 lg:ml-24">
+      <div className="pointer-events-none mt-24 hidden h-[380px] select-none items-end justify-center md:flex lg:mt-8 lg:ml-8">
         <UserAvatarProvider seed="mock" names={names}>
           <DayjsProvider>
             <div className="relative inline-block">

src/middleware.ts

@@ -1,27 +1,35 @@
+import languageParser from "accept-language-parser";
 import { NextRequest, NextResponse } from "next/server";
 
-const supportedLocales = ["en", "es", "de", "fr", "pt-BR", "sv"];
+const supportedLocales = ["en", "es", "de", "fr", "sv", "pt-BR"];
 
 export function middleware({ headers, cookies, nextUrl }: NextRequest) {
-  const language =
-    cookies.get("NEXT_LOCALE") ??
-    (headers
-      .get("accept-language")
-      ?.split(",")?.[0]
-      .split("-")?.[0]
-      .toLowerCase() ||
-      "en");
-
   const newUrl = nextUrl.clone();
 
-  if (supportedLocales.includes(language)) {
-    newUrl.pathname = `/${language}${newUrl.pathname}`;
-  } else if (language === "pt") {
-    // For now we send all portuguese language requests to pt-BR
-    newUrl.pathname = `/pt-BR${newUrl.pathname}`;
+  // Check if locale is specified in cookie
+  const localeCookie = cookies.get("NEXT_LOCALE");
+
+  if (localeCookie && supportedLocales.includes(localeCookie)) {
+    newUrl.pathname = `/${localeCookie}${newUrl.pathname}`;
+    return NextResponse.rewrite(newUrl);
+  } else {
+    // Check if locale is specified in header
+    const acceptLanguageHeader = headers.get("accept-language");
+
+    if (acceptLanguageHeader) {
+      const locale = languageParser.pick(
+        supportedLocales,
+        acceptLanguageHeader,
+      );
+
+      if (locale) {
+        newUrl.pathname = `/${locale}${newUrl.pathname}`;
+        return NextResponse.rewrite(newUrl);
+      }
+    }
   }
 
-  return NextResponse.rewrite(newUrl);
+  return NextResponse.next();
 }
 
 export const config = {

yarn.lock

@@ -1633,6 +1633,11 @@
   resolved "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@types/accept-language-parser@^1.5.3":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@types/accept-language-parser/-/accept-language-parser-1.5.3.tgz#462f65a7d3900d0390415fa774e060c601519bdd"
+  integrity sha512-S8oM29O6nnRC3/+rwYV7GBYIIgNIZ52PCxqBG7OuItq9oATnYWy8FfeLKwvq5F7pIYjeeBSCI7y+l+Z9UEQpVQ==
+
 "@types/body-parser@*":
   version "1.19.2"
   resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
@@ -1881,6 +1886,11 @@
   resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz"
   integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
 
+accept-language-parser@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/accept-language-parser/-/accept-language-parser-1.5.0.tgz#8877c54040a8dcb59e0a07d9c1fde42298334791"
+  integrity sha512-QhyTbMLYo0BBGg1aWbeMG4ekWtds/31BrEU+DONOg/7ax23vxpL03Pb7/zBmha2v7vdD3AyzZVWBVGEZxKOXWw==
+
 acorn-jsx@^5.3.1:
   version "5.3.1"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz"