feat: support next.js

[jimhaakman]

Before you submit:

• Please read the contributing guidelines
• Please search through the existing issues (both open AND closed) to see if your feature has already been discussed. Github issue search can be used for this: https://github.com/imgix/vue/issues?utf8=%E2%9C%93&q=is%3Aissue
• Please take a moment to find out whether your idea fits with the scope and aims of the project

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of how this feature would function.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[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.