如何在Next.js中使用上下文Api

import React, { createContext } from 'react';

// 创建上下文
const MyContext = createContext();

export default MyContext;

import React from 'react';
import MyContext from './MyContext';

const MyComponent = () => {
  // 定义共享的状态或函数
  const sharedState = 'Shared State';
  const sharedFunction = () => {
    // 共享的函数逻辑
  };

  return (
    <MyContext.Provider value={{ sharedState, sharedFunction }}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

import React, { useContext } from 'react';
import MyContext from './MyContext';

const ChildComponent = () => {
  const { sharedState, sharedFunction } = useContext(MyContext);

  return (
    <div>
      <p>{sharedState}</p>
      <button onClick={sharedFunction}>Click me</button>
    </div>
  );
};