【React】React Slickで詰まったとこ

やりたいこと

• next.js、react-slickを使ってカルーセルを表示
  

インストール

パッケージ

npm install react-slick --save

CSS

npm install slick-carousel

実装

コンポーネント

import React from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Image from 'next/image'

export default function Carousel() {
  const settings = {
    dots: true,
    autoplay: true,
    infinite: true,
    speed: 1000,
  };

  const images = [
    {
      id: 1,
      src: "/images/ファイル名.jpg",
      alt: "Image 1"
    },
    {
      id: 2,
      src: "/images/ファイル名.jpg",
      alt: "Image 2"
    },
    {
      id: 3,
      src: "/images/ファイル名.jpg",
      alt: "Image 3"
    }
  ];

   const imageStyle = {
     width: '100%'
   };
  
  return (
    <Slider {...settings}>
      {images.map((image) => (
        <div key={image.id}>
          <Image 
            src={image.src}
            alt={image.alt}
            width={500}
            height={500}
            style={imageStyle}
          />
        </div>
      ))}
    </Slider>
  );
}

使用側

import Carousel from 'パス'

export default function Home() {
  return (
    <div>
      <Carousel />
    </div>
  );
}

間違えたポイント
＜前提＞

• Next.js使用
• 画像の保存先：public/images/**.jpg

パスは「public」以下から指定する。
相対パスの場合はimageの先頭に「/」を付ける

const images = [
    {
      id: 1,
-     src: "public/images/ファイル名.jpg",
+     src: "/images/ファイル名.jpg",
      alt: "Image 1"
    }
  ];

間違えたポイント

• コンポーネントはwidthとheightを指定する必要がある。
• 100%にしたい場合は、別でスタイルを用意してやって、style={}としてあててやる。

const imageStyle = {
    width: '100%'
  };
  
<Image 
  src={image.src}
  alt={image.alt}
  width={500}
  height={500}
  style={imageStyle}
/>

エラー

• モジュールの宣言ファイルが見つかりません ～は暗黙的に'any'型になります。
  プロジェクト作成時、TypeScriptを選択するとなるっぽい。

具体的な内容はキャプチャし忘れ。。。

import Slider from "react-slick";

importにエラーの内容に記載されていたため、それ通りにコマンド実行

npm i --save-dev @types/react-slick

参考文献

• 導入方法、よく使うコマンドが学べる。

• コマンドが豊富

• 公式っぽいが分かりにくい

バージョン

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.2.3",
    "@types/node": "18.14.6",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "next": "13.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-slick": "^0.29.0",
    "slick-carousel": "^1.8.1",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "@types/react-slick": "^0.23.10",
    "@types/slick-carousel": "^1.6.37",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7"
  }