Dynamiske ruter er sider som lar deg bruke egendefinerte parametere i en URL. De er spesielt nyttige n\u00e5r du lager sider for dynamisk innhold.<\/p>\n
For en blogg kan du bruke en dynamisk rute for \u00e5 lage URL-er basert p\u00e5 titlene p\u00e5 blogginnleggene. Denne tiln\u00e6rmingen er bedre enn \u00e5 lage en sidekomponent for hvert innlegg.<\/p>\n
Du kan lage dynamiske ruter i Next.js ved \u00e5 definere to funksjoner: getStaticProps og getStaticPaths.<\/p>\n
For \u00e5 lage en dynamisk rute i Next.js, legg til parenteser p\u00e5 en side. For eksempel, [params].js, [slug].js eller [id].js.<\/p>\n
For en blogg kan du bruke en snegle for den dynamiske ruten. S\u00e5 hvis et innlegg hadde slug dynamic-routes-nextjs<\/strong>, ville den resulterende URL-adressen v\u00e6re https:\/\/example.com\/dynamic-routes-nextjs<\/a>.<\/p>\n I pages-mappen oppretter du en ny fil kalt [slug].js og oppretter Post-komponenten som tar postdataene som en prop.<\/p>\n Det er forskjellige m\u00e5ter du kan sende innleggsdataene til Posten. Metoden du velger avhenger av hvordan du vil gjengi siden. For \u00e5 hente dataene under byggetiden, bruk getStaticProps() og for \u00e5 hente dem p\u00e5 foresp\u00f8rsel, bruk getServerSideProps().<\/p>\n Blogginnlegg endres ikke s\u00e5 ofte, og det er tilstrekkelig \u00e5 hente dem p\u00e5 byggetidspunktet. S\u00e5, endre Post-komponenten for \u00e5 inkludere getStaticProps().<\/p>\n GetStaticProps-funksjonen genererer postdataene som gjengis p\u00e5 siden. Den bruker slug fra banene generert av getStaticPaths-funksjonen.<\/p>\n GetStaticPaths()-funksjonen returnerer banene for sidene som skal forh\u00e5ndsrenderes. Endre Post-komponenten for \u00e5 inkludere den:<\/p>\n Denne implementeringen av getStaticPaths henter alle innleggene som skal gjengis og returnerer sneglene som paramer.<\/p>\n Til sammen vil [slug].js se slik ut:<\/p>\n Du m\u00e5 bruke getStaticProps() og getStaticPaths() sammen for \u00e5 lage en dynamisk rute. GetStaticPaths()-funksjonen skal generere de dynamiske rutene, mens getStaticProps() henter dataene som er gjengitt p\u00e5 hver rute.<\/p>\n For \u00e5 opprette en nestet rute i Next.js, m\u00e5 du opprette en ny mappe i sider-mappen og lagre den dynamiske ruten i den.<\/p>\n For \u00e5 lage \/pages\/posts\/dynamic-routes-nextjs, lagre for eksempel [slug].js i \/pages\/posts.<\/strong><\/p>\n Etter \u00e5 ha opprettet ruten, kan du hente URL-parameteren<\/a> fra den dynamiske ruten ved \u00e5 bruke useRouter() React-kroken<\/a>.<\/p>\n For sidene\/[slug].js, f\u00e5 sneglen slik:<\/p>\n Dette vil vise slug av innlegget.<\/p>\n Ved \u00e5 bruke Next.js kan du hente data p\u00e5 byggetidspunktet og lage dynamiske ruter. Du kan bruke denne kunnskapen til \u00e5 forh\u00e5ndsgjengi sider fra en liste over elementer.<\/p>\n Hvis du vil hente data p\u00e5 hver foresp\u00f8rsel, bruk getServerSideProps i stedet for getStaticProps. Merk at denne tiln\u00e6rmingen er tregere; du b\u00f8r bare bruke den n\u00e5r du bruker regelmessig skiftende data.<\/p>\nconst Post = ({ postData }) => { return <div>{\/* content *\/}<\/div>;};<\/code><\/pre>\nBruke getStaticProps for \u00e5 hente postdata<\/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>\nBruke getStaticPaths for \u00e5 hente baner<\/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>\nOpprette nestede dynamiske ruter i Next.js<\/h2>\n
Tilgang til URL-parametere fra dynamiske ruter<\/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 ruting med getServerSideProps<\/h2>\n