How to pass the same states to a component and a page in Next.js? - state

Question

I'm new to Next.js and I faces some difficulties when it comes to pass props.
In my homePage (index.js) I've got a component (searchbar) and it collects the inputs from the user in states.
I want to pass theses states infos to a page (Pdrs).
With react I did that to pass props :
<Router>
<Header
/>
<Switch>
<Route path="/pdrs/:id">
<PdrsId />
</Route>
<Route path="/pdrs">
<Pdrs
setSearchCity={setSearchCity}
searchCity={searchCity}
page={page}
setPage={setPage}
/>
</Route>
<Route path="/contact">
<Contact />
</Route>
<Route path="/update">
<Update />
</Route>
{/*keep home page last route*/}
<Route path="/">
<Home
setSearchCity={setSearchCity}
searchCity={searchCity}
page={page}
setPage={setPage}
/>
</Route>
</Switch>
<Footer />
</Router>
The searchbar component was imported in the Home page. The states where passed to homePage (see code above) and then passed to the searchbar component.
But with Next.js I don't have this router anymore.
I have a folder "pages" which contains all my pages (=route).
So how can I pass the same states to my component searchbar and my page PDRS ?