title: How to pass data fetched in _app.js to a component
body: <p>In my nextjs project, I have the Layout component that needs api call. Instead of calling api calls in every pages(./pages/*), I'd like to put the logic in some global space. I researched a bit, and it looks like overriding _app.js is the way to go indicated in nextjs documentation(<a href="https://nextjs.org/docs/advanced-features/custom-app" rel="nofollow noreferrer">https://nextjs.org/docs/advanced-features/custom-app</a>).</p>
  
  <p>I have laid out code as below. But it doesn't seem to work.</p>
  
  <p>./pages/_app.js</p>
  
  <pre><code>function MyApp({ Component, appProps, results }) {
  
    return (
      &lt;Layout {...results}&gt;
        &lt;Component {...appProps} /&gt;
      &lt;/Layout&gt;
    )
  }
  
  MyApp.getInitialProps = async (appContext) =&gt; {
    const appProps = await App.getInitialProps(appContext)
    const results = await getResults()  //api call
  
    return { appProps, results }
  }
  </code></pre>
  
  <p>./components/Layout.js</p>
  
  <pre><code>const Layout = ({ children, results }) =&gt; {
  
    return (
      &lt;React.Fragment&gt;
        &lt;Header/&gt;
        &lt;div className='row col-md-8 offset-md-2'&gt;
          {JSON.stringify(results)} //results is nothing here
          &lt;div className='col-md-9'&gt;
            {children}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    )
  }
  </code></pre>
  
  <p>./pages/index.js</p>
  
  <pre><code>...
  return (
      &lt;&gt;
        {head()}
        &lt;Layout&gt;
          &lt;div className='row col-md-12'&gt;
            {showContents()}
          &lt;/div&gt;
        &lt;/Layout&gt;
      &lt;/&gt;
    )
  </code></pre>
  
  <p>I'm sure I'm missing some obvious things. Any help would be appreciated. </p>