Add i18n routing props on getInitialProps context to allow a gradual migration of pages #18396

aralroca · 2020-10-28T15:31:43Z

aralroca
Oct 28, 2020

Feature request

Is your feature request related to a problem? Please describe.

It would be interesting that in the same way that in getStaticProps and getServerSideProps you can access the locale through the context, you can also access it from getInitialProps.

Ideally, all data loading methods: getStaticProps, getServerSideProps, getInitialProps should have the i18n in the context.

This would help many projects to adapt the new i18n routing. Although getInitialProps is no longer recommended, many projects still use it. In fact for now many libraries that offered HOC the only method they touched is that one.

Describe the solution you'd like

❌

Page.getInitialProps = async ({ locale }) => { // Right now is not possible to get the "locale" here
  const translations = await import(`../locales/${locale}/translations.json`).then(m => m.default)

  return { translations }
}

To work in the same way that:

✅

export function getStaticProps = async ({ locale }) => {
  const translations = await import(`../locales/${locale}/translations.json`).then(m => m.default)

  return { { props: { translations } } }
}

or

✅

export function getServerSideProps = async ({ locale }) => {
  const translations = await import(`../locales/${locale}/translations.json`).then(m => m.default)

  return  { { props: { translations } } }
}

maktouch · 2020-10-29T21:46:13Z

maktouch
Oct 29, 2020

I would also like to have this in the getInitialProps inside of next/document

When modifying Document, we can't use hooks, so we can't use the router hooks there.
The ctx.asPath doesn't include the locale (so /fr/test shows as /test), so we can't even parse it from the locale.

0 replies

santialbo · 2020-10-30T08:34:22Z

santialbo
Oct 30, 2020

@maktouch I opened an issue (which got moved to a discussion) for that specific case here #18329
Do you mind explaining your case to Tim too?

1 reply

maktouch Oct 30, 2020

It's the same case as you, so I'll just thumbs up it.

aralroca · 2020-12-01T19:19:48Z

aralroca
Dec 1, 2020
Author

@Timer @tim-phillips @ijjk Is there any reason that this is not in Next 10.0.x?

I will try to take some time to contribute to this, I think that although is better to use getServerSideProps instead of getInitialProps, this blocks large projects from having to continue using i18n in a custom server instead of using this i18n routing feature. This is because changing the getInitialProps on all pages can be very difficult: either because you use HOCs from third party libraries, or because you have different logic between client and server (e.g. skeletons for SPA navigation and displaying all content rendered from SSR).

0 replies

hedwiggggg · 2021-02-20T09:12:50Z

hedwiggggg
Feb 20, 2021

I needed this feature too, because I wanted to stick to DRY; Repeating i18n data fetching in every getStaticProps seemed like a bad practice.

So I came up with a workaround, a bit hacky, but maybe it helps someone:

_app.tsx - Inject a meta with the locale in the head section.

import Head from 'next/head';
import type { AppProps } from 'next/app';

export default (
  function FeedbaxApp(props: AppProps): JSX.Element {  
    const { Component, pageProps } = props;
  
    return (
      <>
        <Head>
          <meta data-locale={props.router.locale} />
        </Head>
  
        <Component {...pageProps} />
      </>
    );
  }  
);

_document.tsx - Read the injected meta and inject the translations.

import Document from 'next/document';
import { Html, Head, Main, NextScript } from 'next/document';

import fs from 'fs';
import path from 'path';

import type { DocumentContext } from 'next/document';

export default (
  class FeedbaxDocument extends Document<{ translation: unknown }> {
    static async getInitialProps(context: DocumentContext) {
      const initialProps = await Document.getInitialProps(context);   

      const currentLocaleElement = initialProps.head?.find((el) => 'data-locale' in el?.props);
      const currentLocale = currentLocaleElement?.props['data-locale'];

      const translationsDir = path.resolve(process.cwd(), 'src/utils/i18n/locales');
      const translationDir = path.join(translationsDir, currentLocale);
      const translationPath = path.join(translationDir, '__generated/translation.json');
      const translationData = fs.readFileSync(translationPath, 'utf-8');

      const translation = JSON.parse(translationData);

      return { ...initialProps, translation };
    }
  
    render() {      
      return (
        <Html>
          <Head />

          <body>
            <Main />
            <NextScript />

            <script
              id="__I18N_DATA__"
              dangerouslySetInnerHTML={{
                __html: `window.translation = ${JSON.stringify(this.props.translation)};`,
              }}
            />
          </body>
        </Html>
      )
    }
  }
);

And then I've got some useTranslation logic with a t function, which looks something like this:

export function useTranslation(): TranslationHook {
  const { locale, locales } = useRouter();
  let translation: Translation;

  if (process.browser) {
    translation = (window as any).translation ?? {};
  } else {
    translation = require(`@/utils/i18n/locales/${locale}/__generated/translation.json`);
  }

  const translate = useCallback(
    (a: string, b?: string, c?: string) => {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const translationAny = translation as any;

      if (typeof a === 'undefined') return translationAny;
      if (typeof b === 'undefined') return translationAny[a];
      if (typeof c === 'undefined') return translationAny[a][b];

      return translationAny[a][b][c];
    },

    [translation],
  );

  return translate;
}

This leads to working i18n ssr & hydration without repeating yourself all the time.

2 replies

hedwiggggg Feb 20, 2021

Okay seems changing the locale doesn't work, because document doesn't reevalute. Will post a workaround later.

hedwiggggg Feb 20, 2021

https://codesandbox.io/s/white-fog-tf67f

Full working example, with async loading if locale changes.
Event better would be something with Context / Provider.

IRediTOTO · 2021-02-26T01:04:46Z

IRediTOTO
Feb 26, 2021

Hi, i don't understand why I got this error: 🚨 [next-translate] In Next 10.x.x there is an issue related to i18n and getInitialProps. We recommend to replace getInitialProps to getServerSideProps on /_error.js.
I don't use any getInitialProps from all my code. Something wrong here.
My page just have this:

import Layout from "src/components/layout"

const Settings =(props)=>{
    return(
        <Layout>
            <h1>This is Settings page</h1>
        </Layout>
    )
}

export default Settings

5 replies

IRediTOTO Feb 26, 2021

Or this error from my custom _document.js file???

class MyDocument extends Document {

   static async getInitialProps(ctx) {

      const initialProps = await Document.getInitialProps(ctx);
      return { ...initialProps };
   }

   render() {...

l0st0 Mar 14, 2021

For now you can just add

export async function getStaticProps() {
return {
props: {},
};
}

and it should work ;)

yukiohori Apr 6, 2021

I have the same error. is it fixed?

gabimoncha Apr 11, 2021

For now you can just add

export async function getStaticProps() {
return {
props: {},
};
}

and it should work ;)

It looks like a forced workaround

Bahodir8586 Apr 15, 2021

Hi I don't understand why I am getting this error:
[next-translate] In Next 10.x.x there is an issue related to i18n and getInitialProps. We recommend to replace getInitialProps
to getServerSideProps on /post/[id].js.

I don't have any getInitialProps in my code
And one more thing.
Translation is working at all my pages without any issues except this /post/[id].js
Only my default language is working here.

aralroca · 2021-04-15T19:58:33Z

aralroca
Apr 15, 2021
Author

This will be fixed after this PR will be merged #21930

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add i18n routing props on getInitialProps context to allow a gradual migration of pages #18396

{{title}}

Replies: 6 comments 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Add i18n routing props on getInitialProps context to allow a gradual migration of pages #18396

Feature request

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Replies: 6 comments · 8 replies

aralroca Dec 1, 2020 Author

aralroca Apr 15, 2021 Author

Replies: 6 comments 8 replies

aralroca
Dec 1, 2020
Author

aralroca
Apr 15, 2021
Author