feat: support next.js about ix-video

[luqven]

Hey, @jimhaakman. Thanks for opening this issue.

It seems you didn't fill out the issue template, but I think you're asking about Next.js support.

Unfortunately, we currently don't offer an SSR wrapper for this library. However, there are a handful of ways to use ix-video in React / Next.js server-side.

You could start by wrapping the web component in a React/Next.js component that only renders on the client.

Dynamic imports.

In Next.js, this is commonly done with dynamic imports. I suggest you look at the Dynamic Imports Next.js documentation for a more in-depth explanation.

import dynamic from 'next/dynamic'

const DynamicHeader = dynamic(() => import('../components/header'), {
  ssr: false,
})

This will load a component on the client side dynamically.

Conditionally render on the presence of window

Another option is to check if window is defined and conditionally render the component depending on the returned value.

const isServer = () => typeof window === `undefined`;
const Page = () =>(
  <> 
      { !isServer() && <YourClientSideComponent /> }
  </>
);

This will prevent the rendering of ix-video until the window is defined on the client.

---

We'd love to export a wrapped version of ix-video that supports SSR, but we're heads down on other priorities at the moment. If that's something you'd like to see, please comment and let us know.

Hopefully, this answers your question. Should anything else come up, please don't hesitate to comment on this issue and tag one of the maintainers.

Thanks again!

[jimhaakman]

Thanks for the response! SSR support would be awesome, but this solves my issue for now :)

[luqven]

Closing this issue as this package has moved to imgix/ix-elements repository.