I am developing a Next.js 13 app and I was wondering what would be the simplest way to implement translation for content. In a previous React app, I was handling this by having multiples translation dictionaries containing the same exact keys and whose values would contain all the content. After that, I would use a store (Zustand) to determine which language is selected by the user to read the correct dictionary. The selected language would be kept in localStorage for future visits.

Because Next.js is a full-stack framework, and things start on server-side, I know I can't read anything directly from localStorage. I would like to point out that I use a lot of hooks for animation purposes and almost all my components have the use-client directive, if it may helps.

How would you approach this?