Next.js je populární open-source framework postavený na Reactu, navržený tak, aby pomáhal vývojářům vytvářet serverově vykreslované aplikace React. Jednou z jeho výkonných funkcí je schopnost vytvářet přechody na straně klienta mezi stránkami bez spuštění úplného opětovného načtení stránky, a to díky vestavěné komponentě next/link. V tomto článku se naučíme, jak používat next/link vytvořením malé aplikace Next.js.
Co je dál/odkaz?
The další/odkaz je komponenta React, která umožňuje vytvářet odkazy mezi stránkami v aplikaci Next.js. Na rozdíl od běžné značky kotvy HTML další/odkaz nespustí opětovné načtení celé stránky, když uživatel klikne na odkaz. Místo toho používá navigaci na straně klienta k načtení nové stránky při zachování aktuálního stavu aplikace. To znamená, že vaše aplikace bude pro uživatele rychlejší a lépe reagovat.
Syntax: Syntaxe pro použití Odkaz je přímočarý. Komponentu můžete importovat z další/odkaz modul:
// Import import Link from 'next/link'; // Link component New Page>
Poté můžete použít komponentu Link v kódu JSX k vytvoření odkazu na jinou stránku. The href prop určuje adresu URL stránky, na kterou chcete odkazovat, a podřízený prvek Odkaz komponenta je obsah odkazu.
základy sestavení ubuntu
Vytvořte aplikaci NextJS: Otevřete terminál nebo příkazový řádek a spusťte následující příkaz
npx create-next-app next-link>
Přejděte do adresáře aplikace/projektu:
cd next-link>
Struktura projektu:
DalšíJs další/odkaz
Základní použití „další/odkaz“: V tomto příkladu vytvoříme jednoduchou aplikaci Next.js se dvěma stránkami: Domov a o . budeme používat další/odkaz k vytvoření propojení mezi stránkami.
Vytvořte nový adresář s názvem stránky v kořenovém adresáři vašeho projektu. Zde budete ukládat své stránky Next.js. Vytvořte nový soubor s názvem index.js uvnitř stránky adresář. Toto bude Domov stránce vaší aplikace. Přidejte následující kód do index.js:
Název souboru: index.js
np.argmax
Javascript
css komentář
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
>
Spusťte vývojový server pomocí příkazu:
npm run dev>
Otevřete webový prohlížeč a přejděte na http://localhost:3000 . Měli byste vidět Domov stránku vaší aplikace se seznamem blog příspěvky. Kliknutím na jeden z odkazů přejdete na stránku jednotlivých příspěvků. Měli byste vidět blog příspěvek s odpovídajícím slimák v URL.
Výstup:
výměna paměti
DalšíJs další/odkaz
V tomto příkladu jsme si ukázali, jak používat další/odkaz s dynamickým směrováním. Vytvořili jsme novou šablonu stránky pro jednotlivce blog příspěvky a použité Odkaz vytvořit odkazy na každou jednotlivou stránku příspěvku. Také jsme použili použijteSměrovač háček od další/směrovač pro přístup k slimák parametr z adresy URL a zobrazí odpovídající blog pošta.
Na závěr, další/odkaz je výkonný nástroj, který zjednodušuje navigaci v aplikacích Next.js a umožňuje rychlé a citlivé vykreslování na straně klienta. Jeho přímočará syntaxe a snadné použití z něj činí oblíbenou volbu mezi vývojáři pro vytváření odkazů mezi stránkami a dynamické směrování.