Dynaamisten reittien luominen Next.js:ssä

Dynaamiset reitit ovat sivuja, joiden avulla voit käyttää mukautettuja parametreja URL-osoitteessa. Ne ovat erityisen hyödyllisiä luotaessa sivuja dynaamiselle sisällölle.

Blogissa voit käyttää dynaamista reittiä luodaksesi URL-osoitteita blogitekstien otsikoiden perusteella. Tämä lähestymistapa on parempi kuin sivukomponentin luominen jokaiselle viestille.

Voit luoda Next.js:ssä dynaamisia reittejä määrittämällä kaksi funktiota: getStaticProps ja getStaticPaths.

PÄIVÄN VIDEON TEKEMINEN

Dynaamisen reitin luominen Next.js:ssä

Voit luoda dynaamisen reitin Next.js:ssä lisäämällä sivulle hakasulkeet. Esimerkiksi [params].js, [slug].js tai [id].js.

Blogissa voit käyttää etanaa dynaamiseen reittiin. Jos siis viestissä olisi etana dynamic-routes-nextjs , tuloksena oleva URL-osoite olisi https://example.com/dynamic-routes-nextjs.

Luo sivut-kansioon uusi tiedosto nimeltä [slug].js ja luo Post-komponentti, joka ottaa postauksen tiedot ehdotuksena.

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

Voit välittää viestitiedot postille eri tavoilla. Valitsemasi menetelmä riippuu siitä, kuinka haluat hahmontaa sivun. Voit hakea tiedot rakennusajan aikana käyttämällä getStaticProps()-komentoa ja hakeaksesi ne pyynnöstä käyttämällä getServerSideProps().

GetStaticPropsin käyttäminen viestitietojen hakemiseen

Blogiviestit eivät vaihdu niin usein, ja niiden hakeminen rakennusvaiheessa riittää. Joten muokkaa Post-komponenttia sisällyttämään siihen 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-toiminto luo sivulla renderöidyt viestitiedot. Se käyttää getStaticPaths-funktion luomien polkujen slugia.

Käytä getStaticPaths-toimintoa polkujen hakemiseen

GetStaticPaths()-funktio palauttaa niiden sivujen polut, jotka pitäisi esihahmontaa. Muuta Post-komponentti sisällyttämään se:

miksi wifi on niin hidas puhelimessani?

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

Tämä getStaticPaths-toteutus hakee kaikki viestit, jotka pitäisi hahmontaa, ja palauttaa slugs-parametreina.

voitko ostaa musiikkia spotifysta

Kaiken kaikkiaan [slug].js näyttää tältä:

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;

Sinun on käytettävä getStaticProps() ja getStaticPaths() yhdessä dynaamisen reitin luomiseksi. GetStaticPaths()-funktion pitäisi luoda dynaamiset reitit, kun taas getStaticProps() hakee kullakin reitillä hahmonnetut tiedot.

Sisäkkäisten dynaamisten reittien luominen Next.js:ssä

Jos haluat luoda sisäkkäisen reitin Next.js:ssä, sinun on luotava uusi kansio sivut-kansioon ja tallennettava dynaaminen reitti sen sisään.

Jos haluat esimerkiksi luoda /pages/posts/dynamic-routes-nextjs, tallenna [slug].js sisään /sivut/viestit.

URL-parametrien käyttäminen dynaamisista reiteistä

Kun olet luonut reitin, voit hakea sen URL-parametri dynaamisesta reitistä käyttämällä useRouter() Reaktiokoukku .

Hae sivuille pages/[slug].js slug seuraavasti:

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

Tämä näyttää viestin etanan.

Dynaaminen reititys getServerSidePropsin avulla

Next.js:n avulla voit hakea tietoja rakennusvaiheessa ja luoda dynaamisia reittejä. Voit käyttää tätä tietämystä sivujen esihahmontamiseen kohdeluettelosta.

Jos haluat hakea tietoja jokaisesta pyynnöstä, käytä getServerSidePropsia getStaticPropsin sijaan. Huomaa, että tämä lähestymistapa on hitaampi; sinun tulee käyttää sitä vain kuluttaessasi säännöllisesti muuttuvia tietoja.