useContext returns undefined nextjs

Question

I'm using next.js and want to use useContext for global state. I'm having trouble passing the value from provider to child element. The returned value of language, in header.js, is undefined.

langContext.js

import { createContext } from 'react';

export const LangContext = createContext();

_app.js

import { LangContext } from '../components/langContext'

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      <LangContext.Provider language="test">
        <Component {...pageProps} />
      </LangContext.Provider>
    </>
  );
};

header.js

import { LangContext } from "../components/langContext"

const Header = () => {
  const language = useContext(LangContext);

   return (
    <>
      {language}
    </>

Answer 1

According to React docs, Provider attribute should be value not language :

The Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree.

Therefore, changing _app.js like so will do the job:

import { LangContext } from '../components/langContext'

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      <LangContext.Provider value="test">
        <Component {...pageProps} />
      </LangContext.Provider>
    </>
  );
}