Jak tworzyć dynamiczne trasy w Next.js

Trasy dynamiczne to strony, które umożliwiają użycie niestandardowych parametrów w adresie URL. Są szczególnie przydatne podczas tworzenia stron z dynamiczną zawartością.

W przypadku bloga możesz użyć trasy dynamicznej, aby utworzyć adresy URL na podstawie tytułów postów na blogu. Takie podejście jest lepsze niż tworzenie komponentu strony dla każdego posta.

Możesz tworzyć trasy dynamiczne w Next.js, definiując dwie funkcje: getStaticProps i getStaticPaths.

Tworzenie trasy dynamicznej w Next.js

Aby utworzyć dynamiczną trasę w Next.js, dodaj nawiasy do strony. Na przykład [params].js, [slug].js lub [id].js.

W przypadku bloga możesz użyć ślimaka dla trasy dynamicznej. Tak więc, jeśli post miał ślimak dynamiczne-trasy-nextjs, wynikowym adresem URL będzie https://example.com/dynamic-routes-nextjs.

W folderze pages utwórz nowy plik o nazwie [slug].js i utwórz komponent Post, który pobiera dane posta jako rekwizyt.

konst Post = ({ postData }) => {
 powrót <dz>{/* treść */}</div>;
};

Istnieją różne sposoby przekazywania danych postu do Post. Wybrana metoda zależy od tego, jak chcesz renderować stronę. Aby pobrać dane podczas kompilacji, użyj getStaticProps() i aby pobrać je na żądanie, użyj getServerSideProps().

Używanie getStaticProps do pobierania danych postów

Posty na blogu nie zmieniają się tak często, a pobieranie ich w czasie kompilacji jest wystarczające. Zmodyfikuj więc komponent Post, aby zawierał funkcję getStaticProps().

import { getSinglePost } z "../../narzędzia/posty";
konst Opublikuj = ({ treść }) => {
 powrót <dz>{/* treść */}</div>;
};
eksportkonst getStaticProps = asynchroniczny ({ parametry }) => {
konst poczta = czekać na getSinglePost (params.slug);
powrót {
 rekwizyty: { ...post },
 };
 };

Funkcja getStaticProps generuje dane posta renderowane na stronie. Wykorzystuje slug ze ścieżek generowanych przez funkcję getStaticPaths.

Używanie getStaticPaths do pobierania ścieżek

Funkcja getStaticPaths() zwraca ścieżki do stron, które powinny zostać wstępnie wyrenderowane. Zmień komponent Post, aby go uwzględnić:

eksportkonst getStaticPaths = asynchroniczny () => {
konst paths = getAllPosts().map(({ slug }) => ({ parametry: { ślimak } }));
powrót {
 ścieżki,
 awaryjna: FAŁSZ,
 };
};

Ta implementacja metody getStaticPaths pobiera wszystkie posty, które powinny zostać wyrenderowane, i zwraca ślimaki jako parametry.

W sumie [slug].js będzie wyglądać tak:

import { pobierz wszystkie posty, pobierz pojedynczy post } z "../../narzędzia/posty";
konst Opublikuj = ({ treść }) => {
 powrót <dz>{treść}</div>;
};
eksportkonst getStaticPaths = asynchroniczny () => {
konst paths = getAllPosts().map(({ slug }) => ({ parametry: { ślimak } }));
powrót {
 ścieżki,
 awaryjna: FAŁSZ,
 };
};
eksportkonst getStaticProps = asynchroniczny ({ parametry }) => {
konst poczta = czekać na getSinglePost (params.slug);
powrót {
 rekwizyty: { ...post },
 };
};
eksportdomyślny Post;

Aby utworzyć trasę dynamiczną, musisz użyć funkcji getStaticProps() i getStaticPaths() razem. Funkcja getStaticPaths() powinna generować dynamiczne trasy, podczas gdy getStaticProps() pobiera dane renderowane na każdej trasie.

Tworzenie zagnieżdżonych tras dynamicznych w Next.js

Aby utworzyć zagnieżdżoną trasę w Next.js, musisz utworzyć nowy folder w folderze pages i zapisać w nim trasę dynamiczną.

Na przykład, aby utworzyć /pages/posts/dynamic-routes-nextjs, zapisz [slug].js w środku /pages/posts.

Dostęp do parametrów adresu URL z tras dynamicznych

Po utworzeniu trasy możesz pobrać plik Parametr adresu URL z trasy dynamicznej za pomocą useRouter() Hak reakcji.

W przypadku stron/[slug].js pobierz ślimak w ten sposób:

import { useRouter } z „następny/router”
konst Opublikuj = () => {
konst router = użyj routera ()
konst { ślimak } = router.zapytanie
 powrót <P>Post: {slug}</P>
}
eksportdomyślny Post

Spowoduje to wyświetlenie ślimaka postu.

Routing dynamiczny z getServerSideProps

Za pomocą Next.js możesz pobierać dane w czasie kompilacji i tworzyć dynamiczne trasy. Możesz wykorzystać tę wiedzę do wstępnego renderowania stron z listy elementów.

Jeśli chcesz pobierać dane przy każdym żądaniu, użyj getServerSideProps zamiast getStaticProps. Należy zauważyć, że to podejście jest wolniejsze; należy go używać tylko podczas korzystania z regularnie zmieniających się danych.