nehalist•16mo ago

Has anyone ever used tRPC (with SSR) and i18n?

No matter the lib (next-intl, next-i18n, next-translate), I simply stumble from one problem to another - most of them simply solved by disabling SSR. Unfortunately, I need SSR and i18n. I know the GitHub issue that the problem here is on next.js, but anyone ever solved this? Hard to believe no one has ever used tRPC with i18n

23 Replies

Nick•16mo ago

I doubt tRPC has anything to do with this honestly Best to ask in the packages you’re trying to use

nehalist•16mo ago

https://github.com/i18next/next-i18next/issues/1682 😦

GitHub

next-i18next not working correctly with wrapped tRPC when SSR is en...

Describe the bug When wrapping an app with withTRPC that is already wrapped with appWithTranslation leads to the error react-i18next:: You will need pass in an i18next instance by using initReactI1...

Nick•16mo ago

Ah I see Probably a good idea to open a bug report with us then. I’m not experienced with SSR but having a GitHub issue will get the right people to see it

nehalist•16mo ago

I often see SSR simply being turned off - but what's the point of using next.js then? It's just an spa then, or do I miss something?

nehalist•16mo ago

Additionally, there's already an issue at your side - seems like you guys can't fix that: https://github.com/trpc/trpc/issues/596

GitHub

@trpc/next with ssr: true breaks getServerSideProps · Issue #...

Notes by @KATT: Solving this is blocked by vercel/next.js#28183. Keeping this open for visibility, but it likely won't be fixed. See warning-block at https://trpc.io/docs/ssr @trpc/next: 8.0.0-...

trash•16mo ago

cc @Tom - QuiiBz i know you have a next i18n lib so maybe you have some pointers

Unknown User•16mo ago

Message Not Public

nehalist•16mo ago

Will try asap, thanks while it seems to work, there's this weird behavior of as soon as I wrap my app in the I18nProvider my dom (ctrl+u) is suddenly empty and it seems SSR becomes completely broken. without the wrapping container all my data is inside the dom

Unknown User•16mo ago

Message Not Public

nehalist•16mo ago

Unfortunately no, but I'll setup a minimal reproduction repo

nehalist•16mo ago

well, I don't understand anything at all anymore: as soon as I wrap my app in an I18nProvider the dom becomes "Loading..." which comes from tRPC

const hello = trpc.hello.useQuery({text: 'client'});
  const t = useI18n();
  if (!hello.data) {
    return <div>Loading...</div>;
  }
  return (
    <div>
      <p>inside i18n provider</p>
      <p>trpc: {hello.data.greeting}</p>
      <p>i18n: {t('hello')}</p>
    </div>
  );

const hello = trpc.hello.useQuery({text: 'client'});
  const t = useI18n();
  if (!hello.data) {
    return <div>Loading...</div>;
  }
  return (
    <div>
      <p>inside i18n provider</p>
      <p>trpc: {hello.data.greeting}</p>
      <p>i18n: {t('hello')}</p>
    </div>
  );

but without the i18n provider everything is fine. hopefully this repo can help: https://github.com/nehalist/trpc-i18n

GitHub

GitHub - nehalist/trpc-i18n

Contribute to nehalist/trpc-i18n development by creating an account on GitHub.

Unknown User•16mo ago

Message Not Public

nehalist•16mo ago

if you inspect the source code of this page it only shows the "loading..." dev. if you remove the i18n provider it shows the actual content btw thanks for your time helping me

Unknown User•16mo ago

Message Not Public

nehalist•16mo ago

but this would hurt seo, or do I miss something? I'm seriously considering switching to using tRPC only within getServerSideProps so that I can disable SSR, but dx suffers a lot imo with this approach

Unknown User•16mo ago

Message Not Public

nehalist•16mo ago

it's kinda weird that having i18n with tRPC causes such a chain of problems. feels like I'm the only one that wants a multi-language tRPC app? 😄

Unknown User•16mo ago

Message Not Public

nehalist•16mo ago

as far as I understand that should certainly fix this, ya, but also means that I cannot use tRPC queries directly within my components anymore and requires some major refactoring on my existing app

Unknown User•16mo ago

Message Not Public

nehalist•16mo ago

that's the big disadvantage of doing it this way, but it seems like it's the only thing that works all of this feels like a "choose 2: i18n, trpc, seo" situation 😄

Kulimantang•15mo ago

Hey guys, I just ran into the ssr problem yesterday myself and I'm also looking into using i18n 🙈. Did you have success in using ServerSideHelpers and have i18n, trpc and seo and the only drawback is bad dx? Would appreciate to know how it turned out for you

yuxinqi•4mo ago

with next-i18next,it work for me

// /src/pages/_app.tsx
import nextI18NextConfig from "../../next-i18next.config.js";
const prod = process.env.NODE_ENV === "production";
MyApp.getInitialProps = async ({ ctx: { locale } }) => {
  return {
    pageProps: {
      ...(await serverSideTranslations(
        locale || nextI18NextConfig.i18n.defaultLocale,
        ["common"],
        { ...nextI18NextConfig, reloadOnPrerender: !prod }
      )),
    },
  };
};

export default trpc.withTRPC(appWithTranslation(MyApp));

// /src/pages/_app.tsx
import nextI18NextConfig from "../../next-i18next.config.js";
const prod = process.env.NODE_ENV === "production";
MyApp.getInitialProps = async ({ ctx: { locale } }) => {
  return {
    pageProps: {
      ...(await serverSideTranslations(
        locale || nextI18NextConfig.i18n.defaultLocale,
        ["common"],
        { ...nextI18NextConfig, reloadOnPrerender: !prod }
      )),
    },
  };
};

export default trpc.withTRPC(appWithTranslation(MyApp));

// /next.config.mjs
import i18nConfig from "./next-i18next.config.js";
const nextConfig = {
  i18n: i18nConfig.i18n,
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    return config;
  },
};
export default nextConfig;

// /next.config.mjs
import i18nConfig from "./next-i18next.config.js";
const nextConfig = {
  i18n: i18nConfig.i18n,
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    return config;
  },
};
export default nextConfig;