Kā izveidot dinamiskus maršrutus vietnē Next.js

Kā izveidot dinamiskus maršrutus vietnē Next.js

Dinamiskie maršruti ir lapas, kas ļauj URL izmantot pielāgotus parametrus. Tie ir īpaši noderīgi, veidojot lapas dinamiskam saturam.





Emuāram varat izmantot dinamisku maršrutu, lai izveidotu vietrāžus URL, pamatojoties uz emuāra ziņu nosaukumiem. Šī pieeja ir labāka nekā lapas komponenta izveide katrai ziņai.





Varat izveidot dinamiskus maršrutus programmā Next.js, definējot divas funkcijas: getStaticProps un getStaticPaths.





DIENAS VIDEO MAKEUSEOF

Dinamiskā maršruta izveide programmā Next.js

Lai vietnē Next.js izveidotu dinamisku maršrutu, pievienojiet lapai iekavas. Piemēram, [params].js, [slug].js vai [id].js.

dators neatmodinās Windows 10

Emuāram dinamiskajam maršrutam varat izmantot sliņķi. Tātad, ja amatam būtu lode dynamic-routes-nextjs , iegūtais URL būtu https://example.com/dynamic-routes-nextjs.



Mapē lapas izveidojiet jaunu failu ar nosaukumu [slug].js un izveidojiet Post komponentu, kas izmanto ziņas datus kā rekvizītu.

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

Ir dažādi veidi, kā nosūtīt ziņas datus ziņai. Izvēlētā metode ir atkarīga no tā, kā vēlaties renderēt lapu. Lai izgūtu datus izveides laikā, izmantojiet getStaticProps() un, lai tos iegūtu pēc pieprasījuma, izmantojiet getServerSideProps().





GetStaticProps izmantošana, lai izgūtu ziņas datus

Emuāra ziņas nemainās tik bieži, un pietiek ar to iegūšanu izveides laikā. Tātad, modificējiet Post komponentu, lai iekļautu 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 },
};
};

Funkcija getStaticProps ģenerē lapā atveidotos ziņu datus. Tas izmanto sliedes no ceļiem, ko ģenerē funkcija getStaticPaths.





GetStaticPaths izmantošana ceļu ienešanai

Funkcija getStaticPaths() atgriež ceļus lapām, kurām jābūt iepriekš atveidotām. Mainiet Post komponentu, lai to iekļautu:

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

Šī getStaticPaths ieviešana ienes visas ziņas, kas būtu jāatveido, un atgriež slides kā parametrus.

Kopumā fails [slug].js izskatīsies šādi:

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;

Lai izveidotu dinamisku maršrutu, ir jāizmanto getStaticProps() un getStaticPaths() kopā. Funkcijai getStaticPaths() ir jāģenerē dinamiskie maršruti, savukārt getStaticProps() ienes katrā maršrutā renderētos datus.

Ligzdoto dinamisko maršrutu izveide vietnē Next.js

Lai programmā Next.js izveidotu ligzdotu maršrutu, mapē lapas ir jāizveido jauna mape un tajā jāsaglabā dinamiskais maršruts.

Piemēram, lai izveidotu /pages/posts/dynamic-routes-nextjs, saglabājiet [slug].js /pages/posts.

Piekļuve URL parametriem no dinamiskajiem maršrutiem

Pēc maršruta izveides varat izgūt URL parametrs no dinamiskā maršruta, izmantojot useRouter() Reakcijas āķis .

Lapām/[slug].js iegūstiet slug šādi:

import { useRouter } from 'next/router' 

const Post = () => {
const router = useRouter()
const { slug } = router.query
return <p>Post: {slug}</p>
}

export default Post

Tiks parādīta ziņas lode.

tīmekļa vietnes, kurās doties garlaicīgi

Dinamiskā maršrutēšana ar getServerSideProps

Izmantojot Next.js, varat iegūt datus izveides laikā un izveidot dinamiskus maršrutus. Varat izmantot šīs zināšanas, lai iepriekš renderētu lapas no vienumu saraksta.

Ja vēlaties iegūt datus par katru pieprasījumu, izmantojiet getServerSideProps, nevis getStaticProps. Ņemiet vērā, ka šī pieeja ir lēnāka; to vajadzētu izmantot tikai tad, ja patērējat regulāri mainīgus datus.