Swiper示例在Next 13中无法开箱即用，如何解决？

问题描述 #

按以下操作复现的异常：

• 执行命令创建Next 13基础应用：npx --yes create-next-app next --use-npm --js --eslint --no-src-dir --experimental-app --import-alias @/*
• 移除layout.js中的全局样式
• 将page.js内容替换为Swiper官方React默认示例代码
• 在page.js顶部添加'use client'标记
• 运行npm run dev启动项目

此时幻灯片会堆叠显示，添加'use client'后问题仍未解决。

修复步骤 #

1. 导入Swiper必要样式 #

幻灯片堆叠的核心原因是Swiper的CSS样式未加载。在Next.js 13的App Router模式下，客户端组件需要手动导入样式文件，在page.js中添加以下导入语句：

// 基础轮播样式
import 'swiper/css';
// 按需导入功能模块样式（比如导航、分页）
import 'swiper/css/navigation';
import 'swiper/css/pagination';

2. 安装兼容版本的Swiper #

确保项目使用的Swiper版本支持Next.js 13和React 18，执行以下命令安装最新稳定版：

npm install swiper@latest

3. 修正Swiper组件代码 #

确保组件代码结构正确，示例如下：

'use client';

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination } from 'swiper/modules';

// 导入样式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default function Home() {
  return (
    <main style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
      <Swiper
        modules={[Navigation, Pagination]}
        spaceBetween={30}
        slidesPerView={1}
        navigation
        pagination={{ clickable: true }}
      >
        <SwiperSlide style={{ height: '300px', backgroundColor: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '2rem' }}>幻灯片1</SwiperSlide>
        <SwiperSlide style={{ height: '300px', backgroundColor: '#ddd', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '2rem' }}>幻灯片2</SwiperSlide>
        <SwiperSlide style={{ height: '300px', backgroundColor: '#ccc', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '2rem' }}>幻灯片3</SwiperSlide>
      </Swiper>
    </main>
  );
}

4. 排查样式冲突（可选） #

若之前移除了layout.js中的全局样式，检查项目自定义样式是否覆盖了Swiper的默认布局规则，避免影响轮播组件的正常渲染。

验证修复 #

重新运行npm run dev，此时幻灯片应正常轮播，不再出现堆叠问题。

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