VuNguyen – 11-36 Sep 1

Hi, there. I'm building a movie website using NextJS, and I want to make a feature that user can still watch movie while browsing other movies (like YouTube). My first thought to this problem is create a component that run on every pages (on _app.js), so it won't unmount when navigating. But the problem is I can't pass props to that component (I won't use pageProps from App component because the streaming urls are fetched on client). I can use context to do to pass props to the component but it will cause re-renders other components, which is not really what I wanted. Is there any solution to solve this? Thank you.
// _app.js

export default function App() {
return (
{/* Things here*/}

<Player />
)
}

// _app.js

export default function App() {
return (
{/* Things here*/}

<Player />
)
}

// pages/watch.js

export default function WatchPage() {
const streamingSources = useSources();

// How can I pass streaming sources to the player component above?
}
// pages/watch.js

export default function WatchPage() {
const streamingSources = useSources();

// How can I pass streaming sources to the player component above?
}
UU
Unknown User595d ago