NextJS 14 internationalization server and client side?

Question

Now in NextJS 13 and above we have the App router, which makes internationalization a bit different than before. I've read multiple guides and how-to's, but the thing that is still not clear to me is if we need different ways of handeling translations on server side / server component and client side.

For example I checked out react-i18next, but I see you've to define a function to handle server components but also an additional function for client components, see https://i18nexus.com/tutorials/nextjs/react-i18next or https://locize.com/blog/next-app-dir-i18n/

I'm wondering if this is just the way how it should be? Or is this just as complicated as I think it is. Once you have to switch a component from server to client, you have to rewrite the translation part in that component as well..

TLDR: is it really necessary to use two different functions/ways to handle translations in nextjs app router? One for server side, one for client side.

Answer 1

In Next.js 13 and above, using the new App Router with server and client components does indeed introduce some complexities when dealing with internationalization (i18n). The main reason for this is that server and client components have different lifecycles and rendering processes, necessitating different approaches for handling translations.

Key Points on Handling Translations

Server Components: Server components are rendered on the server, so translation strings can be fetched and processed during the server-side rendering phase. Tools like react-i18next require specific setup to ensure translations are available on the server.

Client Components: Client components are rendered in the browser, which means translations need to be available at runtime. This often involves loading translation files asynchronously and managing state within the client.

Why Two Different Functions? The need for separate functions arises from the fundamental differences between server-side and client-side rendering:

Server-Side Rendering (SSR): When rendering on the server, you can leverage server capabilities to fetch and prepare data before sending it to the client.

Client-Side Rendering (CSR): When rendering on the client, you need to dynamically fetch and apply translations, which might involve state management and asynchronous operations.

This is the only way that you can localize your nextjs-13 app. From my point of view, you should go with i18nexus package as it's more beginner friendly but if you need more functionalities such as checking untranslated portions, auto translation, get outputs with images, and so on, you should rely on locize as that offers more complex functionalities. Feel free to let me know if you need further assistance.