Next.js 14中Swiper样式加载延迟致幻灯片拉伸的解决方法

我使用Next.js 14.0.3搭配Tailwind CSS开发项目，通过npm安装了11.0.5版本的Swiper JS。页面刷新时，Swiper样式需要1-2秒才能加载完成，在此期间幻灯片会被完全拉伸。

我的Swiper组件代码： #

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

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

function SliderComp() {
  return (
    <div className="relative">
      <Swiper
        modules={[Navigation, Pagination]}
        spaceBetween={10}
        slidesPerView={3}
        grabCursor={true}
        navigation
        pagination={{ clickable: true }}
      >
        <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 1</SwiperSlide>
        <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 2</SwiperSlide>
        <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 3</SwiperSlide>
        <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 4</SwiperSlide>
      </Swiper>
    </div>
  );
}

export default SliderComp;

package.json配置： #

{
  "name": "piuwee",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "animate.css": "^4.1.1",
    "antd": "^5.12.1",
    "next": "14.0.3",
    "node": "^18.14.0",
    "react": "^18",
    "react-animation-on-scroll": "^5.1.0",
    "react-compare-slider": "^3.0.1",
    "react-dom": "^18",
    "react-fast-marquee": "^1.6.2",
    "react-icons": "^4.12.0",
    "react-slick": "^0.29.0",
    "react-timer-hook": "^3.0.7",
    "slick-carousel": "^1.8.1",
    "swiper": "^11.0.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"
  }
}

解决方案： #

• 全局导入Swiper样式：将Swiper的CSS导入从组件内移到全局样式文件（app/globals.css 或 pages/_app.js），确保样式在页面初始化时就加载完成。在globals.css中添加：

  @import "swiper/css";
  @import "swiper/css/navigation";
  @import "swiper/css/pagination";
  

  之后删除组件内的import "swiper/css"相关语句。

• 添加初始占位布局样式：给幻灯片手动设置对应Swiper配置的宽度，避免样式加载前的拉伸。比如对应slidesPerView={3}和spaceBetween={10}，给每个SwiperSlide添加宽度类：

  <SwiperSlide className="bg-sky-200 min-h-[300px] w-[calc(33.333%-7px)]">Slide 1</SwiperSlide>
  

  宽度计算公式：(100% - (slidesPerView - 1) * spaceBetween) / slidesPerView，这里计算后约为33.333% - 7px。同时给外层容器添加overflow-hidden防止幻灯片溢出：

  <div className="relative overflow-hidden">
    {/* Swiper组件 */}
  </div>
  

• 客户端延迟初始化Swiper：利用Next.js的客户端渲染特性，在组件挂载后再渲染Swiper，同时显示骨架屏占位：

  import React, { useEffect, useState } from "react";
  import { Swiper, SwiperSlide } from "swiper/react";
  import { Navigation, Pagination } from "swiper/modules";
  
  import "swiper/css";
  import "swiper/css/navigation";
  import "swiper/css/pagination";
  
  function SliderComp() {
    const [isClient, setIsClient] = useState(false);
  
    useEffect(() => {
      setIsClient(true);
    }, []);
  
    if (!isClient) {
      // 骨架屏占位
      return (
        <div className="relative">
          <div className="flex gap-2.5">
            <div className="bg-sky-200 min-h-[300px] w-1/3 rounded"></div>
            <div className="bg-sky-200 min-h-[300px] w-1/3 rounded"></div>
            <div className="bg-sky-200 min-h-[300px] w-1/3 rounded"></div>
          </div>
        </div>
      );
    }
  
    return (
      <div className="relative overflow-hidden">
        <Swiper
          modules={[Navigation, Pagination]}
          spaceBetween={10}
          slidesPerView={3}
          grabCursor={true}
          navigation
          pagination={{ clickable: true }}
        >
          <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 1</SwiperSlide>
          <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 2</SwiperSlide>
          <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 3</SwiperSlide>
          <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 4</SwiperSlide>
        </Swiper>
      </div>
    );
  }
  
  export default SliderComp;
  

• 排查Next.js CSS优化：临时禁用Next.js的CSS优化功能，确认是否是优化导致的样式延迟。在next.config.js中修改：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: true,
    optimizeCss: false,
  };
  
  module.exports = nextConfig;
  

  如果问题解决，可以尝试升级Next.js版本或调整优化配置，再重新启用CSS优化。

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