How to use Swiper.js in Next.js?

I would like to use the library https://swiperjs.com/ in my Next.js project, but after installing and importing as the “Get started” tutorial instructed, I got the document not defined error.

Then I did some research and it says I need to use dynamic import.

So I tried

import dynamic from "next/dynamic";
import { CSSSelector, SwiperOptions } from 'swiper/types';

type SwiperProps = {
  container: CSSSelector | HTMLElement,
  options?: SwiperOptions
}

const Swiper = dynamic<SwiperProps>(() => import('swiper').then((module) => module.Swiper));

Then I got another error

Argument of type '() => Promise<ComponentClass<SwiperProps, any> | FunctionComponent<SwiperProps> | ComponentModule<SwiperProps> | typeof Swiper>' is not assignable to parameter of type 'DynamicOptions<SwiperProps> | Loader<SwiperProps>'.

I created the SwiperProps type because it is said that I need to use the props of the Swiper module, I don’t know where to find the props so I found the following definition:

enter image description here

Is the parameters in the constructor the props?

Please help. Thanks!