Internationalization with react-i18next -> translations are not displayed server side #5260
Description
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)