【Next.js】useContextを使ってファイル間で値データを共有する

useContextを使ってファイル間で値データを共有します。

test.js

import React from 'react';
import Test2 from './test2';

export const UserCount = React.createContext();

function  Test() {

  let count = 333;

  return (
    <div style={{ textAlign: 'center' }}>
      <h1>Test1</h1>
      <UserCount.Provider value={count}>
        <Test2/>
      </UserCount.Provider>
    </div>
  );
}

export default Test;

test2.js

import {useContext} from 'react';
import { UserCount } from './test';

const Test2 = () => {

    const count = useContext(UserCount);

    return (
        <div>
            <p>Test2</p>
            {count}
        </div>
    )
}

export default Test2

結果

test1.jsからtext2.jsへ、値を渡すことができました！

参考にさせていただいたサイト様