Как отправлять данные из одного компонента в другой в nextjs

Я работаю в nextjs.У меня есть компонент заголовка, и чтобы отображать заголовок на всех других страницах, переопределил app.js с помощью _app.js. Заголовок имеет 2 ссылки навигации usersList и users. Теперь я хочу отправить данные из компонента заголовка на другую страницу, например, usersList и пользователей при нажатии кнопки отправки в заголовке. Как мы можем этого добиться. Я знаю, что мы можем использовать контекст. Я использую компонент на основе классов, не знаю погоды, мы можем использовать контекст. Есть ли другое решение этой проблемы .. Помогите пожалуйста

header.js
class HeaderComponent extends Component {
 onSearch(event){
       //some code
    }
    render() {
        return (
            <div className="navbar">

                          <Input id="search-input" className="text-box" placeholder="Enter name or Email.." onKeyDown={($event)=>this.onSearch($event)} prefix={<Icon type="search" onClick={()=>this.onSearch} ></Icon>}></Input>


            </div>
            )
        }
    }
    export default HeaderComponent

Layout.js

import React, { Component } from 'react';
import Header from './Header';

class Layout extends Component {
  render () {
    const { children } = this.props
    return (
      <div className='layout'>
        <Header />
        {children}
      </div>
    );
  }
}

_app.js

import React from 'react';
import App from 'next/app';
import Layout from '../components/Layout';

export default class MyApp extends App {
  render () {
    const { Component, pageProps } = this.props
    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    )
  }
}

userList.js

class AppUser extends Component {
   render() {
       return (
           <Table
             rowKey={data._id}
             columns={this.columns1}

             onExpand={this.onExpand}
             dataSource={data} 
           />
       )
  }
}

РЕДАКТИРОВАТЬ: можем ли мы достичь этого с помощью реквизита