Anda memerlukan pemaparan sebelah pelayan untuk mencapai kesan ini, kerana kaedah pemaparan biasa hanya akan mula memuatkan imej selepas anda melompat ke halaman. Dalam Next.js, semua halaman yang diakses melalui elemen Pautan diprapaparkan selagi anda berada di halaman yang mengandungi elemen yang menunjuk ke halaman tersebut.

Untuk mencapai kesan ini, mula-mula anda perlu menetapkan kedudukan imej kepada tetap dalam CSS, kemudian buat kesan peralihan, skalakan imej kepada lebar: 100% dan ketinggian: 100%, tetapkan masa peralihan kepada 500 milisaat , dan juga perlu menetapkan Pemasa yang melompat secara automatik ke halaman seterusnya yang mempunyai imej sebagai latar belakang selepas peralihan tamat. Saya tidak tahu sama ada anda perlu melakukan ini, tetapi sertakan di suatu tempat supaya halaman itu akan diprapaparkan dan imej akan dimuatkan serta-merta apabila dihalakan ke halaman.

Halaman pertama:

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" : ""}`} 
      onClick={handleClick}> 
      src="path-to-image" 
      fill 
      alt="image link" />
  </div>
  
)

Halaman seterusnya:

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>
)

Saya menulis contoh ini dalam tailwindcss untuk menjadikannya lebih mudah dibaca, tetapi anda boleh mencapai kesan yang sama dalam mana-mana pustaka CSS lain. Untuk menjadikan peralihan lancar, anda hanya perlu menetapkan tempoh peralihan dan tempoh setTimeout adalah sama, supaya halaman hanya akan mengubah hala apabila peralihan selesai dan imej pada kedua-dua halaman adalah sama.

Semoga saya memberikan jawapan yang anda perlukan. Jika anda perlu melihat perkara yang dilakukan oleh kelas dalam contoh, anda boleh menyemak dokumentasi tailwindcss.