Tukar React ImageSlider kepada NextJS

Question

Saya mempunyai peluncur imej berikut dalam React dan ia berfungsi seperti yang diharapkan:

import React, { useState, useEffect } from "react";
import item1 from "./../assets/images/items/1.jpg";
import item2 from "./../assets/images/items/2.gif";

const imgs = [item1, item2]; // Array of images

const ImageSlider = () => {
  const [current, setCurrent] = useState(0); // Initialize state to display the first image

  // Change image every 2 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrent((current) => (current + 1) % imgs.length); // Move to the next image, go back to the first image after the last
    }, 4000); // Change every 2 seconds

    return () => {
      clearInterval(interval); // Clean up on unmount
    };
  }, []);

  return (
    <div className="relative">
      <img
        src={imgs[0]}
        className="w-full h-auto opacity-0"
        alt="placeholder"
      />
      {imgs.map((img, index) => (
        <img
          key={index}
          src={img}
          alt={`slide-img-${index}`}
          className={`absolute top-0 transition-opacity duration-1000 ease-in-out ${
            current === index ? "opacity-100" : "opacity-0"
          } w-full h-auto`}
        />
      ))}
    </div>
  );
};

export default ImageSlider;

Tetapi ia tidak berfungsi dalam NextJS, saya membuat beberapa pengubahsuaian untuk membetulkan ralat:

"use client";
import React, { useState, useEffect } from "react";

const imgs = ["/images/1.jpg", "/images/2.gif", "/images/3.jpg"];
const ImageSlider = () => {
  const [current, setCurrent] = useState(0); // Initialize state to display the first image

  // Change image every 2 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrent((current) => (current + 1) % imgs.length); // Move to the next image, go back to the first image after the last
    }, 2000); // Change every 2 seconds

    return () => {
      clearInterval(interval); // Clean up on unmount
    };
  }, []);

  return (
    <div className="relative">
      <img
        src={imgs[0]}
        className="w-full h-auto opacity-0"
        alt="placeholder"
      />
      {imgs.map((img, index) => (
        <img
          key={index}
          src={img}
          alt={`slide-img-${index}`}
          className={`absolute top-0 transition-opacity duration-1000 ease-in-out ${
            current === index ? "opacity-100" : "opacity-0"
          } w-full h-auto`}
        />
      ))}
    </div>
  );
};

export default ImageSlider;

Saya cuba menambah "Gunakan Klien" di bahagian atas komponen dan mengubah suai kod untuk membetulkan ralat yang ditunjukkan oleh IDE dan semua imej dalam tatasusunan ditunjukkan dalam tab rangkaian penyemak imbas.

Answer 1

Dalam Next.js, anda tidak boleh menggunakan cangkuk React secara langsung dalam komponen peringkat teratas. Sebaliknya, anda boleh menggunakan cangkuk useEffect dalam fungsi useEffect Next.js. Begini cara untuk mengubah suai kod anda untuk dijalankan dalam Next.js:

import { useState, useEffect } from "react";

const imgs = ["/images/1.jpg", "/images/2.gif", "/images/3.jpg"];
const ImageSlider = () => {
const [current, setCurrent] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
  setCurrent((current) => (current + 1) % imgs.length);
}, 2000);

return () => {
  clearInterval(interval);
};
}, []); // Empty dependency array to run effect only once

return (

  
  {imgs.map((img, index) => (
    
  ))}

  );
};

 export default ImageSlider;