Simple example for Next.js without additional dependencies

[cseas]

🚀 Feature Proposal

Serverless example with Next.js

Motivation

I was following the react-i18next tutorial on a Next.js project and found out it works without any additional config if you just remove the backend plugin.

Example

The example code is available here: vercel/next.js#14978

Considerations

Is there something wrong with using resources in i18n init() and not using any backend plugin for react-i18next? Does it affect performance in any way compared to using the http backend?

The v9 docs mention that implementing react-i18next with Next.js is hard. But the example code I submitted above does that with very minimal config and works without any additional backend, server or extra package.

I'm just curious if that approach has any drawbacks compared to using next-i18next because of which the approach should be discouraged. If not, it seems to be a very simple way of using react-i18next with Next.js and probably should be mentioned in the docs.

[jamuhl]

no, the only difference is https://www.i18next.com/how-to/add-or-load-translations

Using a backend has the benefit on the clientside (less translations are passed down initial (if using namespaces) and it enables to lazy load additional translations)

If your app is small - passing in all resources might be ok

[cseas]

Thanks for the clarification!

Can we add a mention of the benefits of using a backend to the docs? That would make it easier for a beginner to decide whether to use a backend. Something like "While it's not necessary, we recommend using a backend because...".

I really had no clue what the backend was for when I started with the tutorial. I just thought that was a matter of preference and didn't know about the performance hit without a backend.

The Next.js team seems to be really against using the resources approach: vercel/next.js#14978 (comment)

[adrai]

Do you want to try to submit a PR?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[back-2-95]

Thanks @cseas - got the translations working with my Next.js app like a charm with your example