Componenta – Navigare rapidă pe client cu Prefetching automat în Next.js

import Link from 'next/link';

<Link href="/articole">Articole</Link>
<Link href="/blog" prefetch={false}>Blog</Link>

Ce face Componenta <Link> - Navigare rapidă pe client cu Prefetching automat

Componenta <Link> este fundamentul navigării fluide de tip Single Page Application (SPA) în Next.js.

Include funcționalitatea automată de prefetching: ori de câte ori o legătură `` devine vizibilă în ecranul utilizatorului (viewport), Next.js pre-încarcă silențios în fundal codul și datele rutei respective.

Când utilizatorul dă click pe link, pagina se afișează instantaneu cu zero timp de așteptare.

Exemple

Exemplul 1: Crearea unui meniu de navigare cu pre-descărcare automată

Asigură tranziții instantanee între paginile site-ului.

import Link from 'next/link';

export default function Navbar() {
  return (
    <nav className="flex gap-4">
      <Link href="/" className="hover:underline">Acasă</Link>
      <Link href="/ghiduri" className="hover:underline">Ghiduri</Link>
      <Link href="/contact" className="hover:underline">Contact</Link>
    </nav>
  );
}

Ieșire în terminal

Tranziții instantanee pe client fără refresh alb de pagină.

Greșeli frecvente

• Folosirea tag-ului clasic ‘‘ pentru legături interne; aceasta va provoca un refresh complet de browser, pierzând starea React și performanța SPA.

Comenzi înrudite

• Hook-ul useRouter() din next/navigation - Navigare programatică: Permite declanșarea tranzițiilor de navigare din interiorul funcțiilor și componentelor de client.
• Hook-ul usePathname() - Obținerea căii URL curente: Returnează șirul căii URL curente din bara de adrese a browserului.