Dynamiska rutter \u00e4r sidor som l\u00e5ter dig anv\u00e4nda anpassade parametrar i en URL. De \u00e4r s\u00e4rskilt anv\u00e4ndbara n\u00e4r du skapar sidor f\u00f6r dynamiskt inneh\u00e5ll.<\/p>\n
F\u00f6r en blogg kan du anv\u00e4nda en dynamisk rutt f\u00f6r att skapa webbadresser baserat p\u00e5 rubrikerna p\u00e5 blogginl\u00e4ggen. Detta tillv\u00e4gag\u00e5ngss\u00e4tt \u00e4r b\u00e4ttre \u00e4n att skapa en sidkomponent f\u00f6r varje inl\u00e4gg.<\/p>\n
Du kan skapa dynamiska rutter i Next.js genom att definiera tv\u00e5 funktioner: getStaticProps och getStaticPaths.<\/p>\n
F\u00f6r att skapa en dynamisk rutt i Next.js, l\u00e4gg till parenteser p\u00e5 en sida. Till exempel [params].js, [slug].js eller [id].js.<\/p>\n
F\u00f6r en blogg kan du anv\u00e4nda en snigel f\u00f6r den dynamiska rutten. S\u00e5 om ett inl\u00e4gg hade snigeln dynamic-routes-nextjs<\/strong>, skulle den resulterande webbadressen vara https:\/\/example.com\/dynamic-routes-nextjs<\/a>.<\/p>\n Skapa en ny fil som heter [slug].js i pages-mappen och skapa Post-komponenten som tar inl\u00e4ggsdata som en rekvisita.<\/p>\n Det finns olika s\u00e4tt att skicka inl\u00e4ggsdata till Posten. Vilken metod du v\u00e4ljer beror p\u00e5 hur du vill rendera sidan. F\u00f6r att h\u00e4mta data under byggtiden, anv\u00e4nd getStaticProps() och f\u00f6r att h\u00e4mta den p\u00e5 beg\u00e4ran, anv\u00e4nd getServerSideProps().<\/p>\n Blogginl\u00e4gg \u00e4ndras inte lika ofta, och det r\u00e4cker att h\u00e4mta dem vid byggtiden. S\u00e5, modifiera Post-komponenten s\u00e5 att den inkluderar getStaticProps().<\/p>\n GetStaticProps-funktionen genererar inl\u00e4ggsdata som renderas p\u00e5 sidan. Den anv\u00e4nder snigeln fr\u00e5n s\u00f6kv\u00e4garna som genereras av getStaticPaths-funktionen.<\/p>\n Funktionen getStaticPaths() returnerar s\u00f6kv\u00e4garna f\u00f6r sidorna som ska f\u00f6rrenderas. \u00c4ndra Post-komponenten f\u00f6r att inkludera den:<\/p>\n Denna implementering av getStaticPaths h\u00e4mtar alla inl\u00e4gg som ska renderas och returnerar slugarna som params.<\/p>\n Sammantaget kommer [slug].js att se ut s\u00e5 h\u00e4r:<\/p>\n Du m\u00e5ste anv\u00e4nda getStaticProps() och getStaticPaths() tillsammans f\u00f6r att skapa en dynamisk rutt. GetStaticPaths()-funktionen b\u00f6r generera de dynamiska rutterna, medan getStaticProps() h\u00e4mtar data som renderas vid varje rutt.<\/p>\n F\u00f6r att skapa en kapslad rutt i Next.js m\u00e5ste du skapa en ny mapp i pages-mappen och spara den dynamiska rutten i den.<\/p>\n Till exempel, f\u00f6r att skapa \/pages\/posts\/dynamic-routes-nextjs, spara [slug].js inuti \/pages\/posts.<\/strong><\/p>\n Efter att du skapat rutten kan du h\u00e4mta URL-parametern<\/a> fr\u00e5n den dynamiska rutten med hj\u00e4lp av useRouter() React hook<\/a>.<\/p>\n F\u00f6r sidorna\/[slug].js, h\u00e4mta snigeln s\u00e5 h\u00e4r:<\/p>\n Detta kommer att visa inl\u00e4ggets snigel.<\/p>\n Med hj\u00e4lp av Next.js kan du h\u00e4mta data vid byggtid och skapa dynamiska rutter. Du kan anv\u00e4nda denna kunskap f\u00f6r att f\u00f6rrendera sidor fr\u00e5n en lista med objekt.<\/p>\n Om du vill h\u00e4mta data p\u00e5 varje beg\u00e4ran, anv\u00e4nd getServerSideProps ist\u00e4llet f\u00f6r getStaticProps. Observera att detta tillv\u00e4gag\u00e5ngss\u00e4tt \u00e4r l\u00e5ngsammare; du b\u00f6r bara anv\u00e4nda den n\u00e4r du konsumerar data som \u00e4ndras regelbundet.<\/p>\nconst Post = ({ postData }) => { return <div>{\/* content *\/}<\/div>;};<\/code><\/pre>\nAnv\u00e4nda getStaticProps f\u00f6r att h\u00e4mta inl\u00e4ggsdata<\/h2>\n
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 }, }; };<\/code><\/pre>\nAnv\u00e4nda getStaticPaths f\u00f6r att h\u00e4mta s\u00f6kv\u00e4gar<\/h2>\n
export const getStaticPaths = async() => { const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); return { paths, fallback: false, };};<\/code><\/pre>\nimport { 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;<\/code><\/pre>\nSkapa kapslade dynamiska rutter i Next.js<\/h2>\n
\u00c5tkomst till URL-parametrar fr\u00e5n dynamiska rutter<\/h2>\n
import { useRouter } from 'next\/router' const Post = () => { const router = useRouter() const { slug } = router.query return <p>Post: {slug}<\/p>} export default Post<\/code><\/pre>\nDynamisk routing med getServerSideProps<\/h2>\n