Update to remove default locale from URL

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} />
+}

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 />

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 (

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}`,