Support for multiple components in _app.js

[ghost]

Is your feature request related to a problem? Please describe.

I noticed recently that the translation doesn't work when you put multiple elements in _app.js using a fragment wrapped in AppWithTranslation. I usually use the classic way to put the Nav component in _app.js to avoid repeat it in all page components of Next.js. In the sample simple of this repository, looks like you have to repeat it in every component. Its just awful to repeat in every page you have in your app.

PS.: When I try to use useTranslation inside Nav, throw that classic error that fs module is not found, when it doesn't happen, the translation doesn't works.

Describe the solution you'd like

I would like to use the translations in every component wrapped in AppWithTranslation. If it works with this component that wraps the default Component, it should work for every component that is wrapped in it.

Describe alternatives you've considered

I had a tough time trying to discover what's going on under the hood reading react-i18next's code where the main logic is in it and I didn't find out. That's the main reason I'm creating this issue.

Please, provide more examples like simple with dos and dont's, sometimes is really hard to know if you are doing something wrong even follow the simple example.

Additional context

I can provide if needed a repository that explains the current behavior.

[ghost]

After some research in Internet and in this repository. I found some interesting things. The first problem I faced was:

error - ./node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:78:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/next-i18next/serverSideTranslations.js
./components/Nav.js
./pages/_app.js

https://nextjs.org/docs/messages/module-not-found

Based in this question in Stack Overflow I was able to fix it: https://stackoverflow.com/questions/64926174/module-not-found-cant-resolve-fs-in-next-js-application.

The second issue is that the fix of the first raised a warning:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - ./node_modules/next-i18next/dist/commonjs/serverSideTranslations.js
Critical dependency: the request of a dependency is an expression

So, I followed a old issue that I found in this same repository: https://github.com/isaachinman/next-i18next/issues/1545.

The next problem I observed was that:

react-i18next:: You will need to pass in an i18next instance by using initReactI18next

I noticed that the component AppWithTranslation injects the instance i18next in the app through pageProps of _app.js to Component. Then, to solve this warning I passed the instance to Nav component since it is in the same level of Component.

To organize this solution, I made a branch for others that have the same difficult as I have to follow these steps to achieve the same result: https://github.com/lvfxbr/lab/commits/next-i18next-1.

PS.: I tested well enough before publish it (it means that I tested dev, build and start). If there is another issue. Please let me know through this issue.

[ghost]

😅 Sorry, but I have to make an errata about this mistake I made:

I misused getStaticProps inside all the components I needed translation. As the docs of this repository says, getStaticProps is only needed in page components:

serverSideTranslations

This is an async function that you need to include on your page-level components, via either getStaticProps or getServerSideProps (depending on your use case):

And in the documentation of Next.js:

getStaticProps

If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

Another error I have to admit is about the warning:

react-i18next:: You will need to pass in an i18next instance by using initReactI18next

Since this warning is intermitent, its difficult to see if you really solved it. Second to this thread in Stack Overflow:

https://stackoverflow.com/questions/67894982/react-i18next-you-will-need-to-pass-in-an-i18next-instance-by-using-initreacti

Looks like this warning is triggered in dynamic routes (that was my case). I did remove the warning using the prop in next.config.js:

react: {
    useSuspense: false,
},

I can't really assure 100% that it doesn't have a side effect. So, be warned about this. You can read more about Suspense feature of React in here: https://reactjs.org/docs/concurrent-mode-suspense.html. Its a experimental feature in the day that comment is being published.

I published the errata in the same branch to avoid future mistakes: https://github.com/lvfxbr/lab/commits/next-i18next-1.