Convertir React ImageSlider en NextJS

Question

J'ai le curseur d'image suivant dans React et il fonctionne comme prévu :

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;

Mais ça ne marche pas dans NextJS, j'ai fait quelques modifications pour corriger l'erreur :

"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;

J'ai essayé d'ajouter "Utiliser le client" en haut du composant et modifié le code pour corriger l'erreur affichée par l'EDI, toutes les images du tableau étaient affichées dans l'onglet réseau du navigateur.

Answer 1

Dans Next.js, vous ne pouvez pas utiliser les hooks React directement dans les composants de niveau supérieur. Au lieu de cela, vous pouvez utiliser le hook useEffect dans la fonction useEffect de Next.js. Voici comment modifier votre code pour qu'il s'exécute dans 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;