Ako vytvoriť dynamické trasy v Next.js

Dynamické trasy sú stránky, ktoré vám umožňujú používať vlastné parametre v adrese URL. Sú užitočné najmä pri vytváraní stránok pre dynamický obsah.

V prípade blogu môžete použiť dynamickú trasu na vytvorenie adries URL na základe názvov blogových príspevkov. Tento prístup je lepší ako vytváranie komponentu stránky pre každý príspevok.

---

---

Dynamické trasy v Next.js môžete vytvoriť definovaním dvoch funkcií: getStaticProps a getStaticPaths.

VYUŽITIE VIDEA DŇA

Vytvorenie dynamickej trasy v Next.js

Ak chcete vytvoriť dynamickú trasu v súbore Next.js, pridajte na stránku zátvorky. Napríklad [params].js, [slug].js alebo [id].js.

Pre blog môžete použiť slimák pre dynamickú trasu. Takže, ak príspevok mal slimák dynamic-routes-nextjs , výsledná adresa URL by bola https://example.com/dynamic-routes-nextjs.

najlepšie bezplatné aplikácie pre Android

V priečinku Stránky vytvorte nový súbor s názvom [slug].js a vytvorte komponent Post, ktorý prevezme údaje príspevku ako rekvizitu.

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

Existujú rôzne spôsoby, ako môžete odoslať údaje príspevku do príspevku. Spôsob, ktorý si vyberiete, závisí od toho, ako chcete stránku vykresliť. Na načítanie údajov počas zostavovania použite getStaticProps() a na ich načítanie na požiadanie použite getServerSideProps().

---

---

Použitie getStaticProps na načítanie údajov príspevku

Blogové príspevky sa nemenia tak často a stačí ich načítať v čase zostavovania. Upravte teda komponent Post tak, aby obsahoval 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 }, 
    }; 
  }; 

Funkcia getStaticProps generuje údaje príspevku vykreslené na stránke. Používa slug z ciest generovaných funkciou getStaticPaths.

---

---

Použitie getStaticPaths na načítanie ciest

Funkcia getStaticPaths() vracia cesty pre stránky, ktoré by mali byť vopred vykreslené. Zmeňte komponent Post tak, aby ho obsahoval:

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

Táto implementácia getStaticPaths načíta všetky príspevky, ktoré by sa mali vykresliť, a vráti slimáky ako parametre.

Celkovo bude [slug].js vyzerať takto:

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; 

Na vytvorenie dynamickej trasy musíte použiť getStaticProps() a getStaticPaths() spolu. Funkcia getStaticPaths() by mala generovať dynamické trasy, zatiaľ čo funkcia getStaticProps() načítava údaje vykreslené na každej trase.

Vytváranie vnorených dynamických trás v Next.js

Ak chcete vytvoriť vnorenú trasu v súbore Next.js, musíte vytvoriť nový priečinok v priečinku stránok a uložiť doň dynamickú trasu.

Ak chcete napríklad vytvoriť /pages/posts/dynamic-routes-nextjs, uložte [slug].js do /stránok/príspevkov.

ako zvýšiť hlasitosť na iphone

Prístup k parametrom URL z dynamických trás

Po vytvorení trasy môžete načítať parameter adresy URL z dynamickej trasy pomocou useRouter() Reagovať hák .

Pre stránky/[slug].js získajte slug takto:

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

Tým sa zobrazí slimák príspevku.

Dynamické smerovanie s getServerSideProps

Pomocou Next.js môžete načítať údaje v čase zostavovania a vytvárať dynamické trasy. Tieto znalosti môžete použiť na predbežné vykreslenie stránok zo zoznamu položiek.

Ak chcete načítať údaje pri každej požiadavke, použite getServerSideProps namiesto getStaticProps. Všimnite si, že tento prístup je pomalší; mali by ste ho používať iba pri konzumácii pravidelne sa meniacich údajov.