Next.js er en populær open source-ramme bygget oven på React, designet til at hjælpe udviklere med at bygge server-renderede React-applikationer. En af dens kraftfulde funktioner er evnen til at skabe overgange på klientsiden mellem sider uden at udløse en hel sidegenindlæsning, takket være den indbyggede næste/link-komponent. I denne artikel vil vi lære, hvordan du bruger next/link ved at bygge en lille Next.js-applikation.
Hvad er det næste/link?
java datastrukturer
Det næste/link er en React-komponent, der giver dig mulighed for at oprette links mellem sider i en Next.js-applikation. I modsætning til et almindeligt HTML-ankertag, næste/link udløser ikke en helsidegenindlæsning, når brugeren klikker på linket. I stedet bruger den navigation på klientsiden til at indlæse den nye side, mens den bevarer applikationens aktuelle tilstand. Det betyder, at din applikation vil føles hurtigere og mere lydhør over for brugerne.
Syntaks: Syntaksen til brug Link er ligetil. Du kan importere komponenten fra næste/link modul:
// Import import Link from 'next/link'; // Link component New Page>
Derefter kan du bruge Link-komponenten i din JSX-kode til at oprette et link til en anden side. Det href prop angiver URL'en på den side, du vil linke til, og det underordnede element i Link komponent er indholdet af linket.
Opret NextJS-applikation: Åbn en terminal eller kommandoprompt og kør følgende kommando
npx create-next-app next-link>
Naviger til din app/projektmappe:
cd next-link>
Projektets struktur:
NextJs næste/link
Grundlæggende brug af 'næste/link': I dette eksempel vil vi oprette en simpel Next.js-applikation med to sider: hjem og om . Vi vil bruge næste/link at oprette et link mellem siderne.
Opret en ny mappe kaldet sider i roden af dit projekt. Det er her du gemmer dine Next.js-sider. Opret en ny fil kaldet index.js inde i sider vejviser. Dette vil være hjem side i din ansøgning. Tilføj følgende kode til index.js:
np prik
Filnavn: index.js
Javascript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
java metoder
>
>
Kør udviklingsserveren ved hjælp af kommandoen:
npm run dev>
Åbn din webbrowser og naviger til http://localhost:3000 . Du bør se hjem side i din ansøgning med en liste over blog indlæg. Klik på et af linkene for at navigere til den enkelte postside. Du bør se blog indlæg med tilhørende snegl i URL'en.
Produktion:
NextJs næste/link
I dette eksempel viste vi, hvordan man bruger næste/link med dynamisk routing. Vi har lavet en ny sideskabelon til den enkelte blog indlæg og brugt Link at oprette links til hver enkelt indlægsside. Vi brugte også brug Router krog fra næste/router at få adgang til snegl parameter fra URL'en og vis den tilsvarende blog stolpe.
Afslutningsvis, næste/link er et kraftfuldt værktøj, der forenkler navigation i Next.js-applikationer, hvilket muliggør hurtig og responsiv gengivelse på klientsiden. Dens ligetil syntaks og brugervenlighed gør det til et populært valg blandt udviklere til at skabe links mellem sider og dynamisk routing.