From 3ef1b59848484b8f140484b0e7ceb9324baa11e6 Mon Sep 17 00:00:00 2001
From: Hamed Bahram <hamed.bahram@gmail.com>
Date: Fri, 17 Nov 2023 13:25:11 -0500
Subject: [PATCH] Update to remove default locale from URL

---
 app/[lang]/components/custom-link.tsx     | 15 ++++++++++++++
 app/[lang]/components/header.tsx          | 13 ++++++++----
 app/[lang]/components/locale-switcher.tsx | 25 ++++++++++++++++++++---
 middleware.ts                             | 10 +++++++++
 4 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 app/[lang]/components/custom-link.tsx

diff --git a/app/[lang]/components/custom-link.tsx b/app/[lang]/components/custom-link.tsx
new file mode 100644
index 0000000..f106df5
--- /dev/null
+++ b/app/[lang]/components/custom-link.tsx
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import { i18n } from '@/i18n.config'
+
+interface CustomLinkProps {
+  href: string
+  lang: string
+  children: React.ReactNode
+  [key: string]: any
+}
+
+export default function CustomLink({ href, lang, ...props }: CustomLinkProps) {
+  const isDefaultLang = lang === i18n.defaultLocale
+  const path = isDefaultLang ? href : `/${lang}${href}`
+  return <Link href={path} {...props} />
+}
diff --git a/app/[lang]/components/header.tsx b/app/[lang]/components/header.tsx
index b9525b1..ad47347 100644
--- a/app/[lang]/components/header.tsx
+++ b/app/[lang]/components/header.tsx
@@ -1,7 +1,8 @@
-import Link from 'next/link'
+import LocaleSwitcher from './locale-switcher'
+import CustomLink from './custom-link'
+
 import { Locale } from '@/i18n.config'
 import { getDictionary } from '@/lib/dictionary'
-import LocaleSwitcher from './locale-switcher'
 
 export default async function Header({ lang }: { lang: Locale }) {
   const { navigation } = await getDictionary(lang)
@@ -11,10 +12,14 @@ export default async function Header({ lang }: { lang: Locale }) {
       <nav className='container flex items-center justify-between'>
         <ul className='flex gap-x-8'>
           <li>
-            <Link href={`/${lang}`}>{navigation.home}</Link>
+            <CustomLink href='/' lang={lang}>
+              {navigation.home}
+            </CustomLink>
           </li>
           <li>
-            <Link href={`/${lang}/about`}>{navigation.about}</Link>
+            <CustomLink href='/about' lang={lang}>
+              {navigation.about}
+            </CustomLink>
           </li>
         </ul>
         <LocaleSwitcher />
diff --git a/app/[lang]/components/locale-switcher.tsx b/app/[lang]/components/locale-switcher.tsx
index 0bcece1..93e12d5 100644
--- a/app/[lang]/components/locale-switcher.tsx
+++ b/app/[lang]/components/locale-switcher.tsx
@@ -10,9 +10,28 @@ export default function LocaleSwitcher() {
 
   const redirectedPathName = (locale: string) => {
     if (!pathName) return '/'
-    const segments = pathName.split('/')
-    segments[1] = locale
-    return segments.join('/')
+
+    const pathnameIsMissingLocale = i18n.locales.every(
+      locale => !pathName.startsWith(`/${locale}/`) && pathName !== `/${locale}`
+    )
+
+    if (pathnameIsMissingLocale) {
+      if (locale === i18n.defaultLocale) return pathName
+      return `/${locale}${pathName}`
+    } else {
+      if (locale === i18n.defaultLocale) {
+        const segments = pathName.split('/')
+        const isHome = segments.length === 2
+        if (isHome) return '/'
+
+        segments.splice(1, 1)
+        return segments.join('/')
+      }
+
+      const segments = pathName.split('/')
+      segments[1] = locale
+      return segments.join('/')
+    }
   }
 
   return (
diff --git a/middleware.ts b/middleware.ts
index b8b42f1..9518cc2 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -27,6 +27,16 @@ export function middleware(request: NextRequest) {
   // Redirect if there is no locale
   if (pathnameIsMissingLocale) {
     const locale = getLocale(request)
+
+    if (locale === i18n.defaultLocale) {
+      return NextResponse.rewrite(
+        new URL(
+          `/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
+          request.url
+        )
+      )
+    }
+
     return NextResponse.redirect(
       new URL(
         `/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,