title: How to access locale in custom app on server-side in Next.js?
body: <p>I'm migrating a project from <strong>next.js</strong> 7 to 10. It uses <strong>react-intl</strong> for translations and was written in TypeScript.
  <br />
  <br />
  In the previous version I <strong>had a custom server.js</strong> and handled <strong>sub-routing</strong> (/de, /fr, etc.) for multilingual purposes <strong>in it</strong>. And in custom app component, through the getInitialProps, I was getting <strong>locale</strong> from <strong>req</strong> and passed it as a prop to my component. So the whole picture was something like this:
  <br />
  Custom app:</p>
  <pre><code>static async getInitialProps({ Component, ctx }) {
      let pageProps = {}
  
      const { req } = ctx;
      const { locale, messages } = req || (window as any).__NEXT_DATA__.props;
      const initialNow = Date.now();
  
      if (Component.getInitialProps) {
          pageProps = await Component.getInitialProps(ctx)
      }
      return { pageProps, locale, messages, initialNow }
  }
  </code></pre>
  <p>And the component</p>
  <pre><code>render() {
          const { Component, pageProps, locale, messages, initialNow } = (this.props as any);
          return (
              &lt;Container&gt;
                  &lt;IntlProvider locale={locale} messages={messages} initialNow={initialNow}&gt;
                      &lt;Component {...pageProps} /&gt;
                  &lt;/IntlProvider&gt;
              &lt;/Container&gt;
          )
      }
  </code></pre>
  <p>Now since I'm using next.js 10, for many reasons I removed the custom server.js and did the sub-routing through i18n, so I added this in next.config.js:</p>
  <pre><code>module.exports = {
     i18n: {
          locales: [&quot;en&quot;, &quot;de&quot;, &quot;fr&quot;],
          defaultLocale: &quot;en&quot;,
      },
  }
  </code></pre>
  <p>The only thing is that I need to pass the locale to IntlProvider of react-intl in server-side and for all the pages. So I suppose I should do it in custom app and <strong>getInitialProps returns a wrong value for locale (always default)</strong>. And we can't use getServerSideProps  or getStaticProps in custom _app.</p>
  <p>So finally! the question is:
  How can I access the locale on server-side in one place for all of my pages? Or is there a better approach to solve this issue?</p>
  <p>(I can't remove intl and work fully with i18n for now, it needs so much time for this particular project and we don't have it atm!)</p>