在Next.js中，我们可以使用useEffect钩子来避免组件的无限渲染。最常见的情况是当我们添加条件渲染时，组件会不停地重新渲染，从而导致了无限循环的问题。为了解决这个问题，我们可以在useEffect钩子中添加一个依赖数组，以确保只有当依赖项发生变化时，useEffect才会重新运行。

下面是一个示例代码，控制台会输出一次“Hello World”：

import { useState, useEffect } from "react";

export default function InfiniteLoopExample() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    console.log("Hello World");
  }, [isVisible]);

  return (
    

       setIsVisible(!isVisible)}>
        {isVisible ? "Hide" : "Show"}
      
      {isVisible && 
Conditional rendering example
}
    
  );
}