consistent I18nProvider and enable client side translation loading

README.md

@@ -191,6 +191,10 @@ export const getStaticProps = async ({ locale }) => ({
 })
 ```
 
+### 6. Loading translations - Client side
+
+While loading your translations via `getServerSideProps` and `getStaticProps` is recommended if you need to load them client side then you can see the example [here](examples/withClientsideHttp)
+
 #### Options
 
 | Key  | Default value |

examples/simple/README.md

@@ -0,0 +1,5 @@
+# A simple example of next-i18next
+
+This example shows `next-i18next` being used simply for loading translations in a statically generated site usinge the `serverSideTranslations` method
+
+Please see the [main Readme](https://github.com/isaachinman/next-i18next/blob/master/README.md#next-i18next) for more information

examples/simple/pages/_app.js

@@ -1,5 +1,6 @@
 import { appWithTranslation } from 'next-i18next'
+import nextI18nConfig from '../next-i18next.config'
 
 const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />
 
-export default appWithTranslation(MyApp)
+export default appWithTranslation(MyApp, nextI18nConfig)

examples/simple/pages/index.js

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
@@ -11,6 +12,17 @@ const Homepage = () => {
 
   const router = useRouter()
   const { t } = useTranslation('common')
+  const [counter, setCounter] = useState(1)
+
+  useEffect(() => {
+    if (router.query.counter) {
+      setCounter(parseInt(router.query.counter))
+    }
+  },[router.query.counter])
+
+  const updateShallowRoute = () => {
+    router.push(`/?counter=${counter + 1}`, undefined, {shallow: true})
+  }
 
   return (
     <>
@@ -32,14 +44,22 @@ const Homepage = () => {
               {t('to-second-page')}
             </button>
           </Link>
+          <button
+            type='button'
+            onClick={updateShallowRoute}
+          >
+            {t('shallow-route', {counter: counter + 1})}
+          </button>
         </div>
       </main>
       <Footer />
     </>
   )
 }
 
-export const getStaticProps = async ({ locale }) => ({
+export const getStaticProps = async ({
+  locale,
+}) => ({
   props: {
     ...await serverSideTranslations(locale, ['common', 'footer']),
   },

examples/simple/pages/second-page.js

@@ -27,7 +27,7 @@ const SecondPage = () => {
   )
 }
 
-export const getStaticProps = async ({ locale }) => ({
+export const getStaticProps = async ({locale}) => ({
   props: {
     ...await serverSideTranslations(locale, ['second-page', 'footer']),
   },

examples/simple/public/locales/de/common.json

@@ -4,5 +4,6 @@
   "to-second-page": "Zur zweiten Seite",
   "error-with-status": "Auf dem Server ist ein Fehler ({{statusCode}}) aufgetreten",
   "error-without-status": "Auf dem Server ist ein Fehler aufgetreten",
-  "title": "Hauptseite | next-i18next"
+  "title": "Hauptseite | next-i18next",
+  "shallow-route": "zur flache route {{counter}}"
 }

examples/simple/public/locales/en/common.json

@@ -4,5 +4,6 @@
   "to-second-page": "To second page",
   "error-with-status": "A {{statusCode}} error occurred on server",
   "error-without-status": "An error occurred on the server",
-  "title": "Home | next-i18next"
+  "title": "Home | next-i18next",
+  "shallow-route": "To shallow route {{counter}}"
 }