Как да създадете динамични маршрути в Next.js

Динамичните маршрути са страници, които ви позволяват да използвате персонализирани параметри в URL адрес. Те са особено полезни при създаване на страници за динамично съдържание.

За блог можете да използвате динамичен маршрут за създаване на URL адреси въз основа на заглавията на публикациите в блога. Този подход е по-добър от създаването на компонент на страница за всяка публикация.

---

---

Можете да създадете динамични маршрути в Next.js, като дефинирате две функции: getStaticProps и getStaticPaths.

вземете собственост windows 10 безплатно изтегляне

MAKEUSEOF ВИДЕО НА ДЕНЯ

Създаване на динамичен маршрут в Next.js

За да създадете динамичен маршрут в Next.js, добавете скоби към страница. Например [params].js, [slug].js или [id].js.

За блог можете да използвате slug за динамичния маршрут. Така че, ако публикация имаше охлюва динамични-маршрути-следващи , полученият URL ще бъде https://example.com/dynamic-routes-nextjs.

В папката на страниците създайте нов файл, наречен [slug].js, и създайте компонента Post, който приема данните за публикацията като опора.

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

Има различни начини, по които можете да предадете данните за публикацията на публикацията. Избраният от вас метод зависи от това как искате да изобразите страницата. За да извлечете данните по време на изграждане, използвайте getStaticProps(), а за да ги извлечете при поискване, използвайте getServerSideProps().

---

---

Използване на getStaticProps за извличане на публикувани данни

Публикациите в блога не се променят толкова често и извличането им по време на изграждане е достатъчно. Така че, променете компонента Post, за да включите 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 }, 
    }; 
  }; 

Функцията getStaticProps генерира публикуваните данни, изобразени на страницата. Той използва slug от пътищата, генерирани от функцията getStaticPaths.

---

---

Използване на getStaticPaths за извличане на пътища

Функцията getStaticPaths() връща пътищата за страниците, които трябва да бъдат предварително изобразени. Променете компонента Post, за да го включите:

export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
}; 

Тази реализация на getStaticPaths извлича всички публикации, които трябва да бъдат изобразени, и връща охлювите като параметри.

Като цяло [slug].js ще изглежда така:

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; 

Трябва да използвате getStaticProps() и getStaticPaths() заедно, за да създадете динамичен маршрут. Функцията getStaticPaths() трябва да генерира динамичните маршрути, докато getStaticProps() извлича данните, изобразени при всеки маршрут.

Създаване на вложени динамични маршрути в Next.js

За да създадете вложен маршрут в Next.js, трябва да създадете нова папка в папката на страниците и да запазите динамичния маршрут в нея.

Например, за да създадете /pages/posts/dynamic-routes-nextjs, запазете [slug].js вътре /страници/публикации.

Достъп до URL параметри от динамични маршрути

След като създадете маршрута, можете да извлечете URL параметър от динамичния маршрут с помощта на useRouter() Реагирайте куката .

приложение за глас към текст за компютър

За страниците/[slug].js вземете slug-а по следния начин:

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

Това ще покаже охлюва на публикацията.

Динамично маршрутизиране с getServerSideProps

С помощта на Next.js можете да извличате данни по време на изграждане и да създавате динамични маршрути. Можете да използвате тези знания за предварително изобразяване на страници от списък с елементи.

Ако искате да извличате данни за всяка заявка, използвайте getServerSideProps вместо getStaticProps. Имайте предвид, че този подход е по-бавен; трябва да го използвате само когато консумирате редовно променящи се данни.