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

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 ?