title: Next.js/React - How to universally resolve the user language, from an Apollo client HOC?
body: <p>I'm working on a I18n module using the Next.js framework (v5).</p>
  
  <p>In order to display the UI on the user's default language, I'm trying to figure out what that language is, <em>universally</em>.</p>
  
  <p>Resolving the language from the browser is "fairly simple", but I'm having a hard time figuring out how to do that on the server side, <strong>while</strong> providing that value to a HOC that wraps my Page, so that I can specify in my request <code>headers</code> the locale to use, in order to fetch content in that language.</p>
  
  <p>I figured out how to resolve the user's language from the server, using the <code>accept-language</code> header, in the <code>pages/_documents.js</code>:</p>
  
  <pre><code>  static getInitialProps(props) {
      const { req, res, renderPage, isServer = false } = props;
      const cookies = new Cookies();
  
      if (isServer) {
        const headers = req.headers;
        const acceptedUserLanguages = acceptLanguageParser.parse(headers['accept-language']);
        const mostPreferredLanguage = get(acceptedUserLanguages, '[0]', {});
        // {code: 'en', region: 'GB'}
  </code></pre>
  
  <p>This works fine.</p>
  
  <p>But, I need to access this <code>mostPreferredLanguage</code> within my HOC that wraps the Page component, and I really don't know how to do that, because the HOC code is executed <strong>before</strong> the <code>getInitialProps</code> function. And I don't have access to <code>req.headers</code> from the HOC itself, as far as I know.</p>
  
  <p>HOC implementation:</p>
  
  <pre><code>export default withData(
    compose(
      withRedux(configureStore),
      withLoanAdvisor,
      graphql(institutionPagesData, {
        options: (props) =&gt; {
          return {
            context: {
              headers: {
                'gcms-locale': 'FR', // How do I universally get the user language here? I don't have access to request.headers there
                'gcms-locale-no-default': false
              },
            },
          };
        },
      }),
    )(SchoolPage));
  </code></pre>
  
  <hr>
  
  <h2>Potential solutions</h2>
  
  <h3>Redux</h3>
  
  <p>I've been thinking about using <strong>Redux</strong>. I tried to implement it but got blocked as it doesn't seem possible to use Redux on the server side.</p>
  
  <p>The idea with Redux was to use <code>getInitialProps</code> to resolve the language and store it in redux, then I'd connect to the store before running my <code>graphql()</code> HOC query, therefore making the language available in the <code>props</code> of the <code>graphql</code> HOC, so that I could run the query with the correct headers.</p>
  
  <p>But as mentioned, Redux isn't available on the server side and trying to initialise it through <code>_document.js</code> crashes the server. See <a href="https://github.com/zeit/next.js/issues/3990#issuecomment-372159451" rel="nofollow noreferrer">https://github.com/zeit/next.js/issues/3990#issuecomment-372159451</a></p>
  
  <h3>Cookies</h3>
  
  <p>I also tried using cookies, but while I was successful reading cookies from both browser/server, I wasn't able to write them on the server side inside the <code>_document.js</code> <code>getInitialProps</code> function. I don't know why though, and <a href="https://github.com/zeit/next.js/tree/af7d021d48c30e5c78e1022e2458d58e4d1e7753/examples/with-cookie-auth" rel="nofollow noreferrer">existing examples</a> didn't help me out.</p>