Jak tworzyć dynamiczne trasy w Next.js

Trasy dynamiczne to strony, które umożliwiają używanie parametrów niestandardowych w adresie URL. Są one szczególnie przydatne podczas tworzenia stron z treściami dynamicznymi.

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ć dynamiczne trasy w Next.js, definiując dwie funkcje: getStaticProps i getStaticPaths.

MAKEUSEOF WIDEO DNIA

Tworzenie dynamicznej trasy 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 do trasy dynamicznej. Tak więc, jeśli post miał ślimak dynamiczne-trasy-nextjs , wynikowy adres URL to https://example.com/dynamic-routes-nextjs.

W folderze pages utwórz nowy plik o nazwie [slug].js i utwórz komponent Post, który przyjmuje dane posta jako właściwość.

jaka jest różnica między 1080p a 1080i?

const Post = ({ postData }) => { 
  return <div>{/* content */}</div>; 
};

Istnieją różne sposoby przekazywania danych o wpisie do Postu. Wybrana metoda zależy od tego, jak chcesz renderować stronę. Aby pobrać dane w czasie budowania, użyj getStaticProps(), a aby pobrać je na żądanie, użyj getServerSideProps().

Używanie getStaticProps do pobierania danych postu

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

import { getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{/* content */}</div>; 
}; 
  
export const getStaticProps = async ({ params }) => { 
    const post = await getSinglePost(params.slug); 
    return { 
      props: { ...post }, 
    }; 
  };

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

Używanie getStaticPaths do pobierania ścieżek

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

B21564C92A0F56EB6D75D459501081EE0D641B2

Ta implementacja getStaticPaths pobiera wszystkie posty, które powinny zostać wyrenderowane, i zwraca informacje o slugach jako parametry.

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

import { getAllPosts, getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{content}</div>; 
}; 
  
export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export const getStaticProps = async ({ params }) => { 
  const post = await getSinglePost(params.slug); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export default Post;

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

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

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

Na przykład, aby utworzyć /pages/posts/dynamic-routes-nextjs, zapisz [slug].js wewnątrz /strony/posty.

Uzyskiwanie dostępu do parametrów adresu URL z tras dynamicznych

Po utworzeniu trasy możesz pobrać parametr URL z trasy dynamicznej za pomocą funkcji useRouter() Reaguj hak .

W przypadku stron/[slug].js uzyskaj informacje w następujący sposób:

import { useRouter } from 'next/router' 
  
const Post = () => { 
  const router = useRouter() 
  const { slug } = router.query 
  return <p>Post: {slug}</p> 
} 
  
export default Post

Spowoduje to wyświetlenie ślimaka posta.

Dynamiczny routing 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 pobrać dane przy każdym żądaniu, użyj getServerSideProps zamiast getStaticProps. Zauważ, że to podejście jest wolniejsze; należy go używać tylko podczas korzystania z regularnie zmieniających się danych.