Next.js项目中使用react-multi-carousel轮播组件不显示怎么办？

你提供的基础配置逻辑正确，仅需调整少量代码细节即可正常运行，修改点如下：

• 补全缺失的依赖导入：react-multi-carousel官方样式、CSS模块样式文件、类型声明
• 调整响应式配置适配仅2张图的场景，避免桌面端出现空白占位
• 优化Image组件属性，补充必填的alt属性，仅给首图设置priority减少性能消耗
• 调整Carousel的deviceType配置，适配SSR下多设备正确渲染

修改后组件代码 #

// 补全缺失的导入
import Image from "next/image";
import Carousel from "react-multi-carousel";
// 导入轮播组件官方样式
import "react-multi-carousel/lib/styles.css";
// 导入你的CSS模块，根据实际文件路径调整
import styles from "./ProductList.module.css";
// 补充类型声明，如果是从其他文件导入就替换成对应导入语句
type ProductListProps = Record<string, unknown>;

function ProductList(props: ProductListProps) {
  const responsive = {
    superLargeDesktop: {
      breakpoint: { max: 4000, min: 1024 },
      // 总共只有2张图，最多显示2项避免出现空白占位
      items: 2,
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 2,
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1,
    },
  };

  const imageUrls = [
    "https://media.istockphoto.com/vectors/red-apple-illustration-icon-vector-vector-id1045495508",
    "https://media.istockphoto.com/photos/red-apple-picture-id184276818",
  ];

  return (
    <div>
      <Carousel
        responsive={responsive}
        ssr
        infinite
        itemClass="image-item"
        draggable={true} // 移动端可拖动，不需要可以改回false
        // 移除硬编码的deviceType，组件会自动判断，SSR场景可结合next/headers动态传入设备类型
      >
        {imageUrls.map((url: string, index: number) => (
          <Image
            src={url}
            className={`${styles.image} ${styles.carouselImage}`}
            layout="responsive"
            width={865}
            height={513}
            key={url}
            // 仅首图设置priority，避免多图优先级冲突影响性能
            priority={index === 0}
            // 补充Next.js Image组件必填的alt属性，避免控制台报错
            alt={`产品展示图${index + 1}`}
          />
        ))}
      </Carousel>
    </div>
  );
}

export default ProductList;

配置说明 #

你提供的next.config.js配置已经正确将图床域名加入白名单，无需额外调整。

内容的提问来源于stack exchange，提问作者János