Next.js este un cadru popular open source construit pe React, conceput pentru a ajuta dezvoltatorii să construiască aplicații React redate pe server. Una dintre caracteristicile sale puternice este capacitatea de a crea tranziții pe partea client între pagini fără a declanșa o reîncărcare completă a paginii, datorită componentei încorporate următoare/link. În acest articol, vom învăța cum să folosim next/link prin construirea unei mici aplicații Next.js.
Ce urmează/link-ul?
The următor/link este o componentă React care vă permite să creați legături între pagini într-o aplicație Next.js. Spre deosebire de o etichetă de ancorare HTML obișnuită, următor/link nu declanșează o reîncărcare completă a paginii atunci când utilizatorul face clic pe link. În schimb, folosește navigarea pe partea client pentru a încărca noua pagină, păstrând în același timp starea curentă a aplicației. Aceasta înseamnă că aplicația dvs. se va simți mai rapidă și mai receptivă la utilizatori.
Sintaxă: Sintaxa de utilizare Legătură este simplu. Puteți importa componenta din următor/link modul:
// Import import Link from 'next/link'; // Link component New Page>
Apoi, puteți utiliza componenta Link din codul dvs. JSX pentru a crea un link către o altă pagină. The href prop specifică adresa URL a paginii către care doriți să vă conectați și elementul secundar al Legătură componenta este conținutul link-ului.
șir la caracter java
Creați aplicația NextJS: Deschideți un terminal sau un prompt de comandă și executați următoarea comandă
npx create-next-app next-link>
Navigați la directorul aplicației/proiectului dvs.:
cd next-link>
Structura proiectului:
NextJs next/link
Utilizarea de bază a „next/link”: În acest exemplu, vom crea o aplicație simplă Next.js cu două pagini: Acasă și despre . Noi vom folosi următor/link pentru a crea o legătură între pagini.
comandă grep în linux
Creați un nou director numit pagini în rădăcina proiectului tău. Aici vă veți stoca paginile Next.js. Creați un fișier nou numit index.js în interiorul pagini director. Acesta va fi Acasă pagina aplicației dvs. Adăugați următorul cod la index.js:
fișier de citire bash
Nume fișier: index.js
Javascript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
cum se transformă șirul în întreg
>
câte 0 într-un miliard
>
Rulați serverul de dezvoltare folosind comanda:
npm run dev>
Deschideți browserul web și navigați la http://localhost:3000 . Ar trebui să vezi Acasă pagina aplicației dvs. cu o listă de blog postări. Faceți clic pe unul dintre linkuri pentru a naviga la pagina de postare individuală. Ar trebui să vezi blog post cu corespondenta melc în adresa URL.
Ieșire:
NextJs next/link
În acest exemplu, am demonstrat cum se utilizează următor/link cu rutare dinamică. Am creat un nou șablon de pagină pentru persoane fizice blog posturi și folosite Legătură pentru a crea link-uri către fiecare pagină individuală de postare. Am folosit și utilizațiRouter cârlig din următorul/routerul pentru a accesa melc parametrul din URL și afișați cel corespunzător blog post.
În concluzie, următor/link este un instrument puternic care simplifică navigarea în aplicațiile Next.js, permițând randarea rapidă și receptivă pe partea clientului. Sintaxa sa simplă și ușurința de utilizare îl fac o alegere populară în rândul dezvoltatorilor pentru crearea de legături între pagini și rutarea dinamică.