Dinamikus útvonalak létrehozása a Next.js-ben

Dinamikus útvonalak létrehozása a Next.js-ben

A dinamikus útvonalak olyan oldalak, amelyek lehetővé teszik egyéni paraméterek használatát egy URL-ben. Különösen előnyösek dinamikus tartalommal kapcsolatos oldalak létrehozásakor.





Egy blog esetében dinamikus útvonalat használhat az URL-ek létrehozására a blogbejegyzések címe alapján. Ez a megközelítés jobb, mint minden bejegyzéshez oldalkomponenst létrehozni.



A Next.js fájlban dinamikus útvonalakat hozhat létre két függvény meghatározásával: getStaticProps és getStaticPaths.





MAKEUSEOF A NAP VIDEÓJA

Dinamikus útvonal létrehozása a Next.js-ben

Ha dinamikus útvonalat szeretne létrehozni a Next.js-ben, adjon zárójeleket az oldalhoz. Például [params].js, [slug].js vagy [id].js.

Egy bloghoz használhat egy csigát a dinamikus útvonalhoz. Szóval, ha egy poszton lenne a csigája dynamic-routes-nextjs , a kapott URL a következő lenne: https://example.com/dynamic-routes-nextjs.



Az oldalak mappában hozzon létre egy új fájlt [slug].js néven, és hozza létre a Post komponenst, amely a bejegyzés adatait veszi alapul.

hogyan lehet megszabadulni a vízjelektől a Photoshopban 
const Post = ({ postData }) => { 
  return <div>{/* content */}</div>; 
};

A bejegyzés adatait többféleképpen továbbíthatja a bejegyzésnek. A választott módszer attól függ, hogyan szeretné megjeleníteni az oldalt. Az adatok összeállítási ideje alatti lekéréséhez használja a getStaticProps()-t, kérésre pedig a getServerSideProps()-t.



A getStaticProps használata a bejegyzési adatok lekéréséhez

A blogbejegyzések nem változnak olyan gyakran, és elegendő lekérni őket az építési időben. Tehát módosítsa a Post komponenst a getStaticProps() hozzáadásával.

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 }, 
    }; 
  };

A getStaticProps függvény előállítja az oldalon megjelenített bejegyzési adatokat. A getStaticPaths függvény által generált útvonalak slugját használja.



A getStaticPaths használata útvonalak lekéréséhez

A getStaticPaths() függvény visszaadja az előre megjelenítendő oldalak elérési útját. Módosítsa a bejegyzés összetevőt, hogy tartalmazza:

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

A getStaticPaths ezen megvalósítása beolvassa az összes megjelenítendő bejegyzést, és a slug-okat paraméterként adja vissza.

hogyan lehet elérni, hogy a Google Chrome ne használjon sok memóriát

Összességében a [slug].js így fog kinézni:

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;

Dinamikus útvonal létrehozásához együtt kell használnia a getStaticProps() és getStaticPaths() függvényeket. A getStaticPaths() függvény generálja a dinamikus útvonalakat, míg a getStaticProps() lekéri az egyes útvonalakon megjelenített adatokat.

Beágyazott dinamikus útvonalak létrehozása a Next.js-ben

Ha beágyazott útvonalat szeretne létrehozni a Next.js-ben, létre kell hoznia egy új mappát az oldalak mappájában, és el kell mentenie a dinamikus útvonalat abban.

Például a /pages/posts/dynamic-routes-nextjs létrehozásához mentse el a [slug].js fájlt. /oldalak/bejegyzések.

olvassa el a mac merevlemezét a Windows rendszeren

URL-paraméterek elérése a dinamikus útvonalakból

Az útvonal létrehozása után visszakeresheti a URL paraméter a dinamikus útvonalról a useRouter() használatával Reagálás horog .

A pages/[slug].js esetén a következőképpen szerezze be a slug-ot:

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

Ez megjeleníti a bejegyzés csigáját.

Dinamikus útválasztás a getServerSideProps segítségével

A Next.js használatával lekérheti az adatokat az összeállítás során, és dinamikus útvonalakat hozhat létre. Ezt a tudást felhasználhatja oldalak előzetes megjelenítésére egy elemlistából.

Ha minden kérésnél adatokat szeretne lekérni, használja a getServerSideProps-t a getStaticProps helyett. Vegye figyelembe, hogy ez a megközelítés lassabb; csak rendszeresen változó adatok fogyasztása esetén használja.