Next.js är ett populärt ramverk med öppen källkod byggt ovanpå React, designat för att hjälpa utvecklare att bygga server-renderade React-applikationer. En av dess kraftfulla funktioner är möjligheten att skapa övergångar på klientsidan mellan sidor utan att utlösa en omladdning av hela sidan, tack vare den inbyggda nästa/länk-komponenten. I den här artikeln kommer vi att lära oss hur du använder next/link genom att bygga en liten Next.js-applikation.
Vad är nästa/länk?
De nästa/länk är en React-komponent som låter dig skapa länkar mellan sidor i en Next.js-applikation. Till skillnad från en vanlig HTML-ankartagg, nästa/länk utlöser inte en omladdning av hela sidan när användaren klickar på länken. Istället använder den navigering på klientsidan för att ladda den nya sidan samtidigt som det aktuella tillståndet för applikationen bevaras. Detta gör att din applikation kommer att kännas snabbare och mer lyhörd för användarna.
kö och prioriterad kö i java
Syntax: Syntaxen för att använda Länk är okomplicerad. Du kan importera komponenten från nästa/länk modul:
// Import import Link from 'next/link'; // Link component New Page>
Sedan kan du använda länkkomponenten i din JSX-kod för att skapa en länk till en annan sida. De href prop anger webbadressen till sidan du vill länka till och det underordnade elementet i Länk komponenten är innehållet i länken.
Skapa NextJS-applikation: Öppna en terminal eller kommandotolk och kör följande kommando
npx create-next-app next-link>
Navigera till din app-/projektkatalog:
cd next-link>
Projektets struktur:
NextJs nästa/länk
Grundläggande användning av 'nästa/länk': I det här exemplet kommer vi att skapa en enkel Next.js-applikation med två sidor: Hem och handla om . Vi kommer använda nästa/länk för att skapa en länk mellan sidorna.
Skapa en ny katalog som heter sidor i roten av ditt projekt. Det är här du kommer att lagra dina Next.js-sidor. Skapa en ny fil som heter index.js inuti sidor katalog. Detta kommer att vara Hem sidan i din ansökan. Lägg till följande kod till index.js:
Filnamn: index.js
slå på java
Javascript
bash om skick
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
>
Kör utvecklingsservern med kommandot:
npm run dev>
Öppna din webbläsare och navigera till http://localhost:3000 . Du borde se Hem sida i din ansökan med en lista över blogg inlägg. Klicka på en av länkarna för att navigera till den enskilda inläggssidan. Du borde se blogg inlägg med motsvarande snigel i URL:en.
Produktion:
påskägg i Android
NextJs nästa/länk
I det här exemplet visade vi hur man använder nästa/länk med dynamisk routing. Vi skapade en ny sidmall för individen blogg inlägg och används Länk för att skapa länkar till varje enskild inläggssida. Vi använde också använd Router krok från nästa/router för att komma åt snigel parameter från URL:en och visa motsvarande blogg posta.
Sammanfattningsvis, nästa/länk är ett kraftfullt verktyg som förenklar navigering i Next.js-applikationer, vilket möjliggör snabb och lyhörd rendering på klientsidan. Dess enkla syntax och användarvänlighet gör det till ett populärt val bland utvecklare för att skapa länkar mellan sidor och dynamisk routing.