chore(examples): add useSyncLanguage example to change language

docs/examples.md

@@ -8,3 +8,4 @@ There are a few ready made projects that you can find in the examples folder. Th
 - [Custom Language Selection](../examples/custom-language-selection)
 - [Custom Translation Files Location](../examples/custom-location)
 - [Cached Translations](../examples/cached-translations)
+- [Use `useSyncLanguage` to change language](../examples/use-sync-language)

examples/use-sync-language/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/use-sync-language/README.md

@@ -0,0 +1,14 @@
+# Using useSyncLanguage to switch current language
+
+Shows how to use `useSyncLanguage` into a regular `Next.js` project.
+See example in the header component.
+
+## Doc
+
+`useSyncLanguage` can be used when not leveraging next.js' localized routes.
+It will make sure to set the `current language` properly in `i18next` based
+on the language parameter you pass to it.
+
+Note that this can cause an error when rendering on the server. This happens
+because `useTranslation` returns a Suspense. To fix it, either enable react
+Suspense Mode, or set `react.useSuspense = false` in your `ni18n-options.ts`

examples/use-sync-language/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/use-sync-language/next.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'es', 'pt'],
+  },
+  reactStrictMode: true,
+}

examples/use-sync-language/ni18n.config.js

@@ -0,0 +1,4 @@
+export const ni18nConfig = {
+  supportedLngs: ["en", "es", "pt"],
+  ns: ["home"],
+};