Docs: How do I add i18n support? about hydrogen-v1

[jplhomer]

Per Tobi:

We don’t need a local i18n system by template. That’s something people can add themselves via standard react tools. What we need is to be able to request Shopify data with the right locale settings so that the data from us comes in whatever people need. But “how do I add i18n” should be a tutorial, not a default ship.

[benjaminsehl]

@jplhomer: Does the response from this differ from what you'd get from a query with inContext / LocalizationProvider?

Heads up that your link is relative so hits a 404. Should be: nextjs.org/docs/advanced-features/i18n-routing

And then to your point, there is one thing to predict the locale via browser settings and a fallback to GeoIP — another to provide a component to switch locale (like CurrencySwitcher) and persist via cookie or localStorage — and a third to set via URL/the router.

i18n, the Redirects ticket (#89) and the overall "dynamic" goal are all use cases that Next.js solved through their Middleware approach. Has this been discussed? I may just be missing something with Vite or RSC that covers this.

[jplhomer]

Thanks to @bitforcesrl we have step one here: Shopify/hydrogen#397

Our documentation should give developers tips on how to leverage the new locale option in useShopQuery to make localized requests.

[jplhomer]

A couple options here:

• https://github.com/Shopify/quilt/tree/main/packages/react-i18n
• https://www.robinwieruch.de/react-internationalization#react-with-react-i18next-trans-component

Decisions we need to make:

• How opinionated do we make this?
• Do we make it a part of the scaffold only, or abstracted away into the SDK?
• We need to use something that is simple, works with Vite, and can be SSR without interaction from the developer.

[jplhomer]

Thanks @benjaminsehl!

Next.js solved through their Middleware approach. Has this been discussed?

Not really! I still think there's room in Hydrogen framework for a hook or middleware interface. Not sure exactly where that lives or what it looks like yet.

[bitforcesrl]

Hello, this is an hot topic!! To support i18n we need translated URL parts for good SEO. @jplhomer do you plan to do something in this area (hook or config) or do we have to find some workarounds (or force to use next framework)
many thanks

[jplhomer]

Hmm we don't have any plans for localized routing parts right now. That's super intriguing, and I wonder what an API would look like? You couldn't use file-based routing, as it exists, because everything is translated, right?

[bitforcesrl]

@jplhomer i've opened a PR here just to be able to retrieve translated content from storefront API
Shopify/hydrogen#397
this is just a start, very primitive, because the correct way would be set the locale in the useShop context, then it should be call a setServerState but not setting a props called locale (the same happen for country)
we should do setServerState('path', [...path, newLocale])
this should redirect the use to /it or /en and all server pages should be able to read that params as input to use it in the queries

the same for country so the final PW should be
setServerState('path', [...path, `${country}-'${locale}'])

then inside every server page something like this

export default function Collection({
 path
}) {
{country, locale, pagination, productFilters, sortKey, reverse} = helperFnToExtractFromThePath(path)

const {data} = useShopQuery({
    query: QUERY,
    variables: {
      handle,
      country,
      locale,
      numProducts: collectionProductCount,
      productFilters,
      sortKey,
      reverse,
    },
    cache: {
      maxAge: 90000,
    },
  });

[jplhomer]

Dupe of Shopify/hydrogen#1173 - using that to track for now.

[patrick-schneider-latori]

Is there already some kind of basic idea how i18n routing can be solved with Hydrogen?