Další.js další/odkaz
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.
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
Javascript
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:
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í.
