feat: default languageDetection() added

examples/web-ts/pages/index.tsx

@@ -1,30 +1,5 @@
-import { useEffect } from "react";
-import { useRouter } from "next/router";
-import { cookieName, useTranslation } from "next-i18next-static-site";
-import Cookies from "js-cookie";
+import { languageDetection } from "next-i18next-static-site";
 
 export default function Home() {
-  const { i18n } = useTranslation();
-  const router = useRouter();
-
-  useEffect(() => {
-    const cookieLocale = Cookies.get(cookieName);
-
-    let browserLocale =
-      navigator.languages && navigator.languages.length
-        ? navigator.languages[0]
-        : navigator.language;
-
-    browserLocale = browserLocale.slice(0, 2);
-
-    if (cookieLocale && cookieLocale !== "false") {
-      router.push("/" + cookieLocale);
-    } else if (browserLocale) {
-      router.push("/" + browserLocale);
-    } else {
-      router.push("/" + i18n.language);
-    }
-  }, [router, i18n.language]);
-
-  return null;
+  languageDetection();
 }

packages/next-i18next-static-site/README.md

@@ -106,4 +106,15 @@ Now you are able to use `useTranslation`, `withTranslation`, `Translation` and `
 
 ### Language detection
 
-Please check the example [pages/index.tsx](https://github.com/xairoo/next-i18next-static-site/blob/main/examples/web-ts/pages/index.tsx). It contains a simple language detection and redirect solution.
+Your `pages/index.js` can use the default `languageDetection()` function to redirect the user based on the browser locale or stored cookie:
+
+```js
+import { languageDetection } from "next-i18next-static-site";
+
+export default function Home() {
+  languageDetection();
+}
+```
+
+> Custom language detection needed?  
+> Have a look at the `languageDetection()` function: [code](https://github.com/xairoo/next-i18next-static-site/blob/main/packages/next-i18next-static-site/src/index.tsx)

packages/next-i18next-static-site/src/index.tsx

@@ -166,3 +166,31 @@ export function getAllLanguageSlugs() {
 export function getLanguage(lang: string) {
   return config.languages.includes(lang) ? lang : config.defaultLanguage;
 }
+
+// Language detection and redirect
+export const languageDetection = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    let cookieLocale: string | undefined = Cookies.get(cookieName) || undefined;
+
+    let browserLocale: string | undefined =
+      (navigator.languages && navigator.languages.length
+        ? navigator.languages[0]
+        : navigator.language) || undefined;
+
+    if (browserLocale) {
+      browserLocale = browserLocale.slice(0, 2);
+    }
+
+    if (cookieLocale && languages.includes(cookieLocale)) {
+      router.push("/" + cookieLocale);
+    } else if (browserLocale && languages.includes(browserLocale)) {
+      router.push("/" + browserLocale);
+    } else {
+      router.push("/" + defaultLanguage);
+    }
+  }, [router, defaultLanguage]);
+
+  return null;
+};