Merge branch 'feature/locale-detect' into develop

Author: nekofar

package.json

@@ -17,6 +17,7 @@
     "@headlessui/react": "1.7.16",
     "@heroicons/react": "2.0.18",
     "@lingui/core": "4.3.0",
+    "@lingui/detect-locale": "4.2.1",
     "@lingui/react": "4.3.0",
     "clsx": "2.0.0",
     "langs": "2.0.0",

pnpm-lock.yaml

@@ -22,8 +22,6 @@ export function useLocaleSwitcher() {
         pathName = pathName.replace(`[${k}]`, <string>router.query[k])
       })
 
-      // languageDetector.cache?.(nextLocale, ['cookie', 'localStorage'])
-
       await router.replace(pathName)
     },
     [locale, router],

src/hooks/use-locale-switcher.ts

@@ -1,7 +1,7 @@
-import {defaultLocale, Locale} from '@/utils/locales'
-import {useRouter} from 'next/router'
+import { getLocale,Locale } from '@/utils/locales'
+import { useRouter } from 'next/router'
 
 export function useLocale(): Locale {
   const router = useRouter()
-  return (router.query.locale as Locale) || defaultLocale
+  return getLocale(router.query)
 }

src/hooks/use-locale.ts

@@ -1,12 +1,13 @@
-import {defaultLocale, getLocaleDirection, Locale} from '@/utils/locales'
-import {Head, Html, Main, NextScript} from 'next/document'
-import {DocumentProps} from 'postcss'
+import { getLocale, getLocaleDirection, Locale } from '@/utils/locales'
+import { Head, Html, Main, NextScript } from 'next/document'
+import { DocumentProps } from 'postcss'
+import { ParsedUrlQuery } from 'querystring'
 
-type Props = DocumentProps & { __NEXT_DATA__: { query: { locale: string } } }
+type Props = DocumentProps & { __NEXT_DATA__: { query: ParsedUrlQuery } }
 
 export default function Document(props: Props) {
   const { __NEXT_DATA__: nextData } = props
-  const locale = nextData?.query?.locale || defaultLocale
+  const locale = getLocale(nextData.query)
 
   const language = locale as Locale
   const direction = getLocaleDirection(language)

src/pages/_document.tsx

@@ -1,19 +1,20 @@
-import { defaultLocale, loadCatalog } from '@/utils/locales'
+import {defaultLocale, getLocale, loadCatalog} from '@/utils/locales'
+import { GetStaticPropsContext } from 'next'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
 export default function Home() {
   const router = useRouter()
 
   useEffect(() => {
-    router.replace(`/${defaultLocale}`)
+    router.replace(`/${getLocale()}`)
   }, [router])
 
   return null
 }
 
 export const getStaticProps = async () => {
   return {
-    props: { translation: await loadCatalog(defaultLocale) },
+    props: { translation: await loadCatalog(getLocale()) },
   }
 }

src/pages/index.ts

@@ -1,5 +1,7 @@
 import linguiConfig from '@/../lingui.config'
+import { detect, fromPath } from '@lingui/detect-locale'
 import langs from 'langs'
+import { ParsedUrlQuery } from 'querystring'
 
 export type Locale = (typeof linguiConfig.locales)[number]
 
@@ -19,10 +21,19 @@ export async function loadCatalog(locale: Locale): Promise<object> {
   }
 }
 
-export function getLocaleDirection(locale: Locale) {
-  return ['ar', 'he', 'fa'].includes(locale) ? 'rtl' : 'ltr'
+export function getLocale(query?: ParsedUrlQuery): Locale {
+  const localFromPath = typeof window !== 'undefined' ? fromPath(0) : undefined
+  const localeFromQuery = query?.locale
+
+  const detectedLocale = detect(localFromPath, localeFromQuery)
+
+  return detectedLocale || defaultLocale
 }
 
 export function getLocaleName(locale: Locale) {
   return langs.where(1, locale)!.local
 }
+
+export function getLocaleDirection(locale: Locale) {
+  return ['ar', 'he', 'fa'].includes(locale) ? 'rtl' : 'ltr'
+}