Next.js搭配React Swiper使用时触发Invalid hook call报错

• 该Invalid hook call报错和Swiper版本没有关联：Swiper v7、v8的React封装都属于纯客户端组件，内部依赖useState、useEffect等React Hooks；Next.js默认会对页面组件做服务端渲染（SSR），服务端执行环境不满足Hooks调用规则，就会触发报错，因此降级Swiper到v7无法解决问题。
• 从提供的package.json配置看，项目中react与react-dom版本完全匹配，可排除多React实例冲突的常见诱因，核心问题就是SSR阶段提前加载了仅支持客户端运行的Swiper组件。

方法1：动态导入Swiper并禁用SSR（优先使用） #

使用Next.js自带的next/dynamic能力导入Swiper相关组件，强制组件仅在客户端渲染，跳过服务端编译执行环节。
修改后的完整组件代码如下：

import React from "react";
import dynamic from "next/dynamic";
import { HomHeroProps } from "@lib/@types/home.types";
// 动态导入Swiper核心组件，关闭SSR渲染
const Swiper = dynamic(() => import("swiper/react").then(mod => mod.Swiper), { ssr: false });
const SwiperSlide = dynamic(() => import("swiper/react").then(mod => mod.SwiperSlide), { ssr: false });
// 引入Swiper基础样式，避免轮播布局、样式异常
import "swiper/css";

export const Hero: React.FC<HomHeroProps> = ({ carousel, description }) => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log("slide change")}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

如果后续需要使用分页、导航、自动播放等Swiper扩展功能，对应模块也需要在客户端侧注册，不要放在服务端执行的逻辑块中导入。

方法2：清理重装依赖（方法1无效时排查） #

如果完成上述修改后仍报错，大概率是本地依赖缓存异常导致存在多份React副本，执行以下命令清理并重装依赖即可：

# 删除现有依赖目录与版本锁文件
rm -rf node_modules package-lock.json
# 重新安装全量依赖
npm install

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