Hydration errors with client components when importing useGT from "gt-next" instead of "gt-next/client"

[SamEggert]

How to recreate:

1. create a Nextjs App, use gtx-cli to initialize and setup the gt-next library.
2. Create the following component and include it in the app/page.tsx
3. Run gtx-cli translate
4. Run npm run dev
5. Switch to another locale.

Component:

"use client";

// hydration fails
import { useGT } from "gt-next";

// // hydration works
// import { useGT } from "gt-next/client";

export function ClientComponent() {
  const t = useGT();

  return <div>{t("Hello")}</div>;
}

The error:

Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error```