Next.js: Internationalization with react-i18next -> translations are not displayed server side

Created on 23 Sep 2018 · 1Comment · Source: vercel/next.js

translations are not displayed server side

Internationalization with react-i18next

Describe the bug

When you run the example and look at the source code of the page, you got:

<!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head"/><link rel="preload" href="/_next/-/page/index.js" as="script"/><link rel="preload" href="/_next/-/page/_app.js" as="script"/><link rel="preload" href="/_next/-/page/_error.js" as="script"/><link rel="preload" href="/_next/static/commons/manifest.js" as="script"/><link rel="preload" href="/_next/static/commons/main.js" as="script"/></head><body><div id="__next"></div><div id="__next-error"></div><script>
          __NEXT_DATA__ = {"props":{"pageProps":{}},"page":"/","pathname":"/","query":{},"buildId":"-","assetPrefix":"","nextExport":false,"err":null,"chunks":[]}
          module={}
          __NEXT_LOADED_PAGES__ = []
          __NEXT_LOADED_CHUNKS__ = []

          __NEXT_REGISTER_PAGE = function (route, fn) {
            __NEXT_LOADED_PAGES__.push({ route: route, fn: fn })
          }

          __NEXT_REGISTER_CHUNK = function (chunkName, fn) {
            __NEXT_LOADED_CHUNKS__.push({ chunkName: chunkName, fn: fn })
          }

          false
        </script><script async="" id="__NEXT_PAGE__/" src="/_next/-/page/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/-/page/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/-/page/_error.js"></script><script src="/_next/static/commons/manifest.js"></script><script src="/_next/static/commons/main.js"></script></body></html>

As you can see, there's absolutely no translated string in this code which is generated server-side. While is should display the whole translated website, for SEO purposes.

To Reproduce

Go to https://github.com/zeit/next.js/tree/canary/examples/with-react-i18next
Use one of the methods to get the example on local
Run the app and go to the browser
Ctrl+U to get the source code of the page

Expected behavior

We should see all those strings in the source code:

This example integrates react-i18next for simple internationalization.
welcome to next.js
This example integrates react-i18next for simple internationalization.

test words for en

fire in the wind for en
You can either pass t function to child components.

Or wrap your component using the translate hoc provided by react-i18next.

Alternatively, you can use Trans component.

Go to page 2
Go to page 3 (no hoc)

good first issue

Source