how to use in nextjs

I write a component `import React, { useEffect } from 'react'; import LazyLoad from 'vanilla-lazyload'; import classnames from 'classnames'; import './index.scss';

const classPrefix = 'qnr-img-lazy-load'; const placeholderImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAAAXNSR0IArs4c6QAAABZJREFUKFNjZKAQMFKon2HUAIbhEAYADbYACoSGQt8AAAAASUVORK5CYII=';

interface ImgLazyLoadProps { /**

• @description 图片链接 / src: string; /*
• @description 图片alt / alt?: string; /*
• @description 图片浮层内容 / children?: React.ReactNode | React.ReactNode[]; /*
• @description 样式 / restStyles?: React.CSSProperties; /*
• @description 样式 / className?: string; /*
• @description 是否开启懒加载
• @default true / isLazyLoad?: boolean; /*
• @description 只展示图片，没有占位图片
• @default false */ onlyImg?: boolean; }

declare global { interface Window { lazyLoadInstance: any; // 懒加载实例 } }

// Only initialize it one time for the entire application if (typeof window !== 'undefined' && !window.lazyLoadInstance) { window.lazyLoadInstance = new LazyLoad({ elements_selector: .${classPrefix}-lazy, }); }

const ImgLazyLoad = (props: ImgLazyLoadProps) => { const { src, children, className, isLazyLoad = true, onlyImg = false, restStyles = {}, ...others } = props;

useEffect(() => { if (window.lazyLoadInstance && typeof window.lazyLoadInstance.update === 'function') { window.lazyLoadInstance.update(); } }, [src]);

return ( <> {onlyImg ? ( <img className={classnames( className, isLazyLoad ? ${classPrefix}-lazy ${classPrefix}-lazy-img : '', )} style={restStyles} src={isLazyLoad ? placeholderImg : src} data-src={isLazyLoad ? src : undefined} alt='img' {...others} /> ) : ( <div className={classnames( className, isLazyLoad ? ${classPrefix}-lazy ${classPrefix}-lazy-bg : '', )} style={restStyles} data-bg={isLazyLoad ? src : undefined} {...others} > {children} ) } </> ); };

export default ImgLazyLoad;

`

index.css

`$class-prefix-img-lazy-load: 'qnr-img-lazy-load';

.#{$class-prefix-img-lazy-load} { &-lazy-img { width: 100%; /* 根据屏幕宽度设置图片宽度 / height: 100%; / 高度自适应 */ background-color: rgba(0, 0, 0, .1); }

&-lazy-img.loaded { background-color: transparent; /* 图片加载完成后移除占位图 */ }

&-lazy-bg { position: relative; width: 100%; height: 100%; min-height: 100%; background: rgba(0, 0, 0, .1) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAAAXNSR0IArs4c6QAAABZJREFUKFNjZKAQMFKon2HUAIbhEAYADbYACoSGQt8AAAAASUVORK5CYII=') center center / cover no-repeat; } }

`

when i use this in nextjs。it happen wrong.

in server the img is lost .

in client

the same img ,Repeat the request once

How can I solve this?