你需要伺服器端渲染來實現這個效果，因為普通的渲染方式會在你跳到頁面後才開始載入圖片。在Next.js中，透過Link元素存取的所有頁面都是預先渲染的，只要你在包含指向該頁面的元素的頁面上。

為了達到這個效果，首先你需要在CSS中將圖片的position設定為fixed，然後建立一個過渡效果，將圖片縮放到width: 100%和height: 100%，過渡時間設定為500毫秒，還需要設定一個定時器，在過渡結束後自動跳到下一個已經將圖片作為背景的頁面。我不知道你是否需要這樣做，但是在某個地方包含一個，這樣頁面就會被預先渲染，並且在路由到該頁面時圖片會立即加載。

第一個頁面：

const router = useRouter();

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

function handleClick() {
  setTransitionStarted(true);

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

return (
  

    
    "}`} 
      onClick={handleClick}> 
      src="path-to-image" 
      fill 
      alt="image link" />
  
  
)

下一個頁面：

return (
  

    
  
)

我在tailwindcss中編寫了這個範例，以便更易讀，但你可以在任何其他CSS函式庫中實現相同的效果。為了讓過渡變得平滑，你只需要將過渡持續時間和setTimeout的持續時間設定為相同，這樣頁面只有在過渡完成且兩個頁面上的圖片完全相同時才會重定向。