title: How to get state of _app.js in Next.js?
body: <p>I have initiated a state in <code>_app.js</code> using Next.js.
  I would like to use this state in the <code>index.js</code> file. 
  How can I access it?</p>
  
  <p>This is my <code>_app.js</code> code:</p>
  
  <pre><code>import React from 'react';
  import App, { Container } from 'next/app';
  import Layout from '../components/Layout';
  
  export default class MyApp extends App {
    constructor(props) {
      super(props);
      this.state = {
        currencyType: {
          name: 'Ether',
          price: 1,
        },
        ethPriceUsd: 1,
      };
    }
  
    static async getInitialProps({ Component, router, ctx }) {
      let pageProps = {};
      let ethPriceUsd;
  
      if (Component.getInitialProps) {
        fetch(`https://api.coingecko.com/api/v3/coins/ethereum/`)
          .then((result) =&gt; result.json())
          .then((data) =&gt; {
            ethPriceUsd = parseFloat(data.market_data.current_price.usd).toFixed(
              2
            );
          });
        pageProps = await Component.getInitialProps(ctx);
      }
  
      return { pageProps, ethPriceUsd };
    }
  
    componentDidMount() {
      const ethPriceUsd = this.props.ethPriceUsd;
      this.setState({ ethPriceUsd });
    }
  
    onCurrencyTypeChange(currencyTypeValue) {
      let currencyType = {};
      //Value comes from Header.js where Ether is 0 and USD is 1
      if (currencyTypeValue) {
        currencyType = {
          name: 'USD',
          price: this.state.ethPriceUsd,
        };
      } else {
        currencyType = {
          name: 'Ether',
          price: 1,
        };
      }
      alert('We pass argument from Child to Parent: ' + currencyType.price);
      this.setState({ currencyType });
    }
  
    render() {
      const { Component, pageProps } = this.props;
      return (
        &lt;Container&gt;
          &lt;Layout changeCurrencyType={this.onCurrencyTypeChange.bind(this)}&gt;
            &lt;Component {...pageProps} /&gt;
          &lt;/Layout&gt;
        &lt;/Container&gt;
      );
    }
  }
  </code></pre>
  
  <p>A lot of it is irrelevant (Like passing the data to the Layout etc...). All I want to do is use this state in my <code>index.js</code>.</p>