Konvertieren Sie React ImageSlider in NextJS

Question

Ich habe den folgenden Bildschieberegler in React und er funktioniert wie erwartet:

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;

Aber es funktioniert nicht in NextJS. Ich habe einige Änderungen vorgenommen, um den Fehler zu beheben:

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

Ich habe versucht, „Client verwenden“ oben in der Komponente hinzuzufügen und habe den Code geändert, um den von der IDE angezeigten Fehler zu beheben. Alle Bilder im Array wurden auf der Registerkarte „Netzwerk“ des Browsers angezeigt.

Answer 1

在 Next.js 中，您不能直接在顶级组件中使用 React hooks。相反，您可以在 Next.js 的 useEffect 函数中使用 useEffect 挂钩。以下是修改代码以使其在 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;