您需要服务器端渲染，因为使用常规渲染时，一旦路由到页面，图像就开始加载。在Next.js中，所有通过Link元素访问的页面都是预先呈现的，而您所在的页面包含指向它的<Link>元素。
为了达到这个效果，你要做的第一件事就是在css中创建一个position: fixed图像，然后创建一个转换，将图像缩放到width: 100%和height: 100%，这样转换就需要500 ms，同时设置一个超时，将你转到下一个已经有图像作为背景的页面。我不知道你是否必须这样做，但在某个地方包含一个<Link href="/next-page" />，这样页面就被预先渲染，图像在路由到它时会立即加载。
首页：

const router = useRouter();

const [transitionStarted, setTransitionStarted] = useState<boolean>(false);

function handleClick() {
  setTransitionStarted(true);

  setTimeout(() => {
    router.push("/next-page");
  }, 500)
}

return (
  <div>
    <Link className="hidden" href="/next-page" />
    <Image 
      className={`duration-500 ${transitionStarted ? "fixed w-full h-full top-0 left-0" : "<initial image sizing and styles>"}`} 
      onClick={handleClick}> 
      src="path-to-image" 
      fill 
      alt="image link" />
  </div>
  
)

字符串
下一页：

return (
  <div>
    <Image className="fixed w-full h-full top-0 left-0" fill alt="image that is used as background on next page" />
  </div>
)

型
我用tailwindcss编写了这个例子，所以它更易读，但是你可以在任何其他css库中实现同样的事情。要使过渡平滑，您必须做的唯一一件事是使transition-duration和setTimeout duration相同，以便页面仅在过渡完成并且两个页面上的两个图像相同时重定向。
希望我已经给了你想要的答案。如果您需要查看示例中的类在做什么，这里是tailwindcss documentation。