在Next.js中使用上下文API

我正在构建一个简单的Next.js网站,它使用spacex-graphql API,使用apollo作为客户端。我正在尝试进行一个api调用,将返回的数据保存到state,然后将该状态设置为上下文。 然而,在我将数据保存到状态之前,我想检查我的上下文提供者是否真的为应用程序提供了上下文,所以我只是将字符串“test”作为上下文传递。 然而,在尝试在另一个组件中提取此上下文时,我出现了以下错误:

错误:默认导出不是页面中的React组件:“/”

我的项目设置如下,我想我可能把上下文文件放错了地方:

pages
 -api
 -items
    -_app.js
    -index.js
public
styles
next.config.js
spacexContext.js

以下是我的应用程序的其余部分:

spaceContext.js

import { useState,useEffect,createContext } from 'react'
import { ApolloClient, InMemoryCache, gql } from "@apollo/client"

export const LaunchContext = createContext()


export const getStaticProps = async () => {

  const client = new ApolloClient({
    uri: 'https://api.spacex.land/graphql/',
    cache: new InMemoryCache()
  })

  const { data } = await client.query({
    query: gql`
      query GetLaunches {
        launchesPast(limit: 10) {
          id
          mission_name
          launch_date_local
          launch_site {
            site_name_long
          }
          links {
            article_link
            video_link
            mission_patch
          }
          rocket {
            rocket_name
          }
        }
      }
    `
  });

  return {
    props: {
      launches: data.launchesPast
    }
  }
}

const LaunchContextProvider = (props) => {

    return(
        <LaunchContext.Provider value = 'test'>
            {props.children}
        </LaunchContext.Provider>
    )
}

export default LaunchContextProvider

_app.js

import LaunchContextProvider from '../spacexContext'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <LaunchContextProvider>
      <Component {...pageProps} />
    </LaunchContextProvider>
  )
}

export default MyApp

关于为什么会出现这个错误以及如何修复它,有什么建议吗?