如何在nextjs中使用contextAPI

import { createContext } from 'react';

const MyContext = createContext();

import { useState } from 'react';
import { MyContext } from '../path/to/MyContext';

function MyApp({ Component, pageProps }) {
  const [data, setData] = useState('Hello from Context');

  return (
    <MyContext.Provider value={data}>
      <Component {...pageProps} />
    </MyContext.Provider>
  );
}

export default MyApp;

import { MyContext } from '../path/to/MyContext';

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {data => <p>{data}</p>}
    </MyContext.Consumer>
  );
}

export default ChildComponent;