Passing down data from _document into a context provider #11772

kevinvdburgt · 2020-04-09T09:53:38Z

kevinvdburgt
Apr 9, 2020

We're building a multi language website using NextJS, but instead of choosing the language based on routing (ex; http://localhost/en/blog, http://localhost/de/blog) we have multiple domain extensions (ex; http://domain.com/blog, http://domain.de/blog). The _document is aware of the language to use by a helper function that checks the content of ctx.req.headers.host in the static async getInitialProps function. We pass that down to the render function:

  render() {
    const { language } = this.props;

    return <Html lang={language}>
      <Head>
        <title>Language: {language}</title>
      </Head>
      <body>
        <span>Test: {language}</span>
        <Main />
        <NextScript />
      </body>
    </Html>;
  };

Now the question is, how do we pass down that language prop down to our _app's LanguageContext provider so we can use our translation hooks without breaking SSR?

import { useContext } from 'react';
import LanguageContext from '../context/LanguageContext';
import translations from '../locale/translations';

const useTranslation = () => {
  const { language } = useContext(LanguageContext);

  const translate = (key: string, ...params: any) => {
    if (!translations[key]) {
      return `Missing translation for: ${key}`;
    }

    const item: string | Function = !!translations[key][language]
      ? translations[key][language]
      : translations[key][0];

    if (typeof item === 'function') {
      return item(...params);
    }

    return item;
  };

  return translate;
};

export default useTranslation;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Passing down data from _document into a context provider #11772

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Passing down data from _document into a context provider #11772

Uh oh!

kevinvdburgt Apr 9, 2020

Replies: 0 comments

kevinvdburgt
Apr 9, 2020