diff --git a/README.md b/README.md index 611e3b88..867ba337 100644 --- a/README.md +++ b/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 | diff --git a/examples/simple/README.md b/examples/simple/README.md new file mode 100644 index 00000000..5913ac94 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/examples/simple/pages/_app.js b/examples/simple/pages/_app.js index 2b639436..08f43f2b 100644 --- a/examples/simple/pages/_app.js +++ b/examples/simple/pages/_app.js @@ -1,5 +1,6 @@ import { appWithTranslation } from 'next-i18next' +import nextI18nConfig from '../next-i18next.config' const MyApp = ({ Component, pageProps }) => -export default appWithTranslation(MyApp) +export default appWithTranslation(MyApp, nextI18nConfig) diff --git a/examples/simple/pages/index.js b/examples/simple/pages/index.js index 9a6e6741..55bbe23c 100644 --- a/examples/simple/pages/index.js +++ b/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,6 +44,12 @@ const Homepage = () => { {t('to-second-page')} +