Następny.js to popularna platforma typu open source zbudowana na bazie React, zaprojektowana, aby pomóc programistom w tworzeniu aplikacji React renderowanych na serwerze. Jedną z jego zaawansowanych funkcji jest możliwość tworzenia przejść między stronami po stronie klienta bez konieczności ponownego ładowania całej strony, dzięki wbudowanemu komponentowi next/link. W tym artykule dowiemy się jak wykorzystać next/link budując małą aplikację Next.js.
Co dalej/link?
The następny/link to komponent React pozwalający na tworzenie linków pomiędzy stronami w aplikacji Next.js. W przeciwieństwie do zwykłego tagu zakotwiczenia HTML, następny/link nie powoduje ponownego załadowania całej strony, gdy użytkownik kliknie łącze. Zamiast tego korzysta z nawigacji po stronie klienta, aby załadować nową stronę, zachowując bieżący stan aplikacji. Oznacza to, że Twoja aplikacja będzie szybsza i bardziej responsywna dla użytkowników.
Składnia: Składnia użycia Połączyć jest proste. Możesz zaimportować komponent z pliku następny/link moduł:
// Import import Link from 'next/link'; // Link component New Page>
Następnie możesz użyć komponentu Link w kodzie JSX, aby utworzyć łącze do innej strony. The href prop określa adres URL strony, do której chcesz utworzyć łącze, oraz element potomny Połączyć komponentem jest treść łącza.
postorderowe przechodzenie drzewa binarnego
Utwórz aplikację NextJS: Otwórz terminal lub wiersz poleceń i uruchom następujące polecenie
npx create-next-app next-link>
Przejdź do katalogu swojej aplikacji/projektu:
cd next-link>
Struktura projektu:
NastępnyJs następny/link
Podstawowe użycie „next/link”: W tym przykładzie utworzymy prostą aplikację Next.js składającą się z dwóch stron: dom I o . Użyjemy następny/link aby utworzyć łącze pomiędzy stronami.
Diana Ankudinowa
Utwórz nowy katalog o nazwie strony w katalogu głównym swojego projektu. Tutaj będziesz przechowywać swoje strony Next.js. Utwórz nowy plik o nazwie indeks.js w środku strony informator. To będzie dom stronę swojej aplikacji. Dodaj następujący kod do indeks.js:
ważny
Nazwa pliku: indeks.js
JavaScript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
Pasek narzędzi szybkiego dostępu ms word
>
podkreśl tekst za pomocą CSS
>
Uruchom serwer deweloperski za pomocą polecenia:
npm run dev>
Otwórz przeglądarkę internetową i przejdź do http://localhost:3000 . Powinieneś zobaczyć dom strona aplikacji z listą blogu posty. Kliknij jeden z linków, aby przejść do strony z konkretnym postem. Powinieneś zobaczyć blogu post z odpowiednim ślimak w adresie URL.
Wyjście:
NastępnyJs następny/link
W tym przykładzie pokazaliśmy, jak używać następny/link z routingiem dynamicznym. Stworzyliśmy nowy szablon strony dla osób indywidualnych blogu posty i używane Połączyć aby utworzyć linki do poszczególnych stron postów. Korzystaliśmy także z użyjRoutera hak od następny/router aby uzyskać dostęp do ślimak parametr z adresu URL i wyświetlić odpowiedni parametr blogu post.
Podsumowując, następny/link to potężne narzędzie, które upraszcza nawigację w aplikacjach Next.js, umożliwiając szybkie i responsywne renderowanie po stronie klienta. Prosta składnia i łatwość użycia sprawiają, że jest to popularny wybór wśród programistów do tworzenia łączy między stronami i dynamicznego routingu.