Next.js 13集成react-slick报错及轮播组件替代方案咨询

问题原因 #

你遇到的TypeError: Super expression must either be null or a function，本质是react-slick v0.25.2与Next.js 13的App Router默认服务器组件机制不兼容：

• react-slick基于类组件实现，且依赖浏览器环境API，在服务器端渲染时会触发继承逻辑错误；
• Next.js 13 App Router默认组件为服务器组件，无法直接导入依赖客户端环境的第三方组件。

修复方案 #

1. 转为客户端组件并动态导入react-slick #

调整代码确保react-slick仅在客户端运行：

修改screen.tsx

import React from 'react';
import dynamic from 'next/dynamic';

// 动态导入Slider，禁用服务器端渲染
const Slider = dynamic(() => import('react-slick'), { ssr: false });

function MainPage() {
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };

    return (
        <div>
            <Slider {...settings}>
                <div><h3>1</h3></div>
                <div><h3>2</h3></div>
                <div><h3>3</h3></div>
                <div><h3>4</h3></div>
                <div><h3>5</h3></div>
                <div><h3>6</h3></div>
            </Slider>
        </div>
    );
}

export default MainPage;

修改layout.tsx

Next.js 13服务器组件不能导入CSS，需给layout添加'use client'指令转为客户端组件：

'use client';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

// 你的layout其他代码

2. 升级react-slick到最新版本（可选） #

旧版本兼容性问题较多，建议升级到最新稳定版：

npm install react-slick@latest slick-carousel@latest

替代轮播组件推荐 #

如果react-slick仍无法满足需求，推荐以下适配Next.js 13的轮播组件：

• Swiper.js：功能全面，支持响应式、触摸滑动、服务器端渲染，文档完善，适合复杂轮播场景；
• react-responsive-carousel：轻量易用，API简洁，支持基础轮播功能，适合快速开发；
• Next.js官方自定义实现：基于Next.js Image组件搭建，无第三方依赖，适合轻量需求。

内容的提问来源于stack exchange，提问作者Arcxtgc