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

_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

pageProps

from

App

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?
}

VuNguyen – 11-36 Sep 1

Similar Threads