Next.js React Swiper 사용법 및 Image 컴포넌트 최적화

npm install swiper

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination } from 'swiper';
 
const SwiperComponent = () => {
  return (
    <Swiper>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};
 
export default SwiperComponent;

// ... 생략
const SwiperComponent = () => {
  return (
    <Swiper
      spaceBetween={20}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      autoplay={{ delay: 2500 }}
      loop
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';
 
const SwiperComponent = () => {
  return (
    <Swiper
      modules={[Pagination]}
      pagination={{
        clickable: true, // 페이지네이션 클릭 가능하게 설정
        type: 'bullets', // 불릿 타입으로 설정 (기본값) 'bullets', 'fraction', 'progressbar', 'custom' 중 선택
        // dynamicBullets: true, // 동적 불릿 효과 적용 (선택사항)
      }}
    >
      {/* SwiperSlides... */}
    </Swiper>
  );
};

.swiper-pagination-bullet {
  background: #000; /* 비활성 불릿 색상 */
}
 
.swiper-pagination-bullet-active {
  background: #007aff; /* 활성 불릿 색상 */
}

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper/modules';
 
const SwiperComponent = () => {
  return (
    <Swiper
      modules={[Navigation]}
      navigation={{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }}
    >
      {/* SwiperSlides... */}
      <div className="swiper-button-next"></div>
      <div className="swiper-button-prev"></div>
    </Swiper>
  );
};

.swiper-button-next,
.swiper-button-prev {
  color: #007aff; /* 버튼 색상 */
}
 
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 24px; /* 버튼 크기 */
}
 
.swiper-button-disabled {
  opacity: 0.35; /* 비활성 버튼 투명도 */
  cursor: auto;
  pointer-events: none;
}

const SwiperComponent = () => {
  return (
    <Swiper
      modules={[Navigation]}
      navigation={{
        nextEl: '.custom-next-button',
        prevEl: '.custom-prev-button',
      }}
    >
      {/* SwiperSlides... */}
      <button className="custom-next-button">다음</button>
      <button className="custom-prev-button">이전</button>
    </Swiper>
  );
};

import exampleImage from './images/example.jpg';

import Image from 'next/image';
import exampleImage from './images/example.jpg';
import exampleImage1 from './images/example1.jpg';
import exampleImage2 from './images/example2.jpg';
 
const SwiperComponent = () => {
  return (
    <Swiper
    // .. 옵션 생략
    >
      <SwiperSlide>
        <Image src={exampleImage} alt="example" />
      </SwiperSlide>
      <SwiperSlide>
        <Image src={exampleImage1} alt="example" />
      </SwiperSlide>
      <SwiperSlide>
        <Image src={exampleImage2} alt="example" />
      </SwiperSlide>
    </Swiper>
  );
};

import Image from 'next/image';
import exampleImage from './images/example.jpg';
import exampleImage1 from './images/example1.jpg';
import exampleImage2 from './images/example2.jpg';
 
const images = [exampleImage, exampleImage1, exampleImage2];
 
const SwiperComponent = () => {
  return (
    <Swiper
    // .. 옵션 생략
    >
      {images.map((image, index) => (
        <SwiperSlide key={index}>
          <Image src={image} alt="example" />
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

import exampleImage from './example.jpg';
import exampleImage1 from './example1.jpg';
import exampleImage2 from './example2.jpg';
 
export const images = [exampleImage, exampleImage1, exampleImage2];

import Image from 'next/image';
import { images } from './images';
 
const SwiperComponent = () => {
  return (
    <Swiper
    // .. 옵션 생략
    >
      {images.map((image, index) => (
        <SwiperSlide key={index}>
          <Image src={image} alt="example" />
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

<Image src={image} alt="example" loading="eager" />

<Image src={image} alt="example" priority loading="eager" />

import Image from 'next/image';
import { images } from './images';
 
const SwiperComponent = () => {
  return (
    <Swiper
    // .. 옵션 생략
    >
      {images.map((image, index) => (
        <SwiperSlide key={index}>
          <Image src={image} alt="example" loading="eager" />
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

<Image src={image} alt="example" loading="eager" sizes="25vw" />

<Image
  src={image}
  alt="example"
  loading="eager"
  sizes="(max-width: 768px) 100vw, 50vw" // 768px 이하일 때 100vw, 그 이상일 때 50vw
/>