Dynamische routes zijn pagina's waarmee u aangepaste parameters in een URL kunt gebruiken. Ze zijn vooral handig bij het maken van pagina's voor dynamische inhoud.
Voor een blog kunt u een dynamische route gebruiken om URL's te maken op basis van de titels van de blogposts. Deze aanpak is beter dan het maken van een paginacomponent voor elk bericht.
U kunt dynamische routes maken in Next.js door twee functies te definiëren: getStaticProps en getStaticPaths.
Een dynamische route maken in Next.js
Voeg haakjes toe aan een pagina om een dynamische route in Next.js te maken. Bijvoorbeeld [params].js, [slug].js of [id].js.
Voor een blog zou je een slak kunnen gebruiken voor de dynamische route. Dus, als een bericht de slak had dynamische-routes-nextjs, zou de resulterende URL zijn https://example.com/dynamic-routes-nextjs.
Maak in de map Pages een nieuw bestand met de naam [slug].js en maak de Post-component die de postgegevens als prop gebruikt.
const Post = ({ postData }) => {
opbrengst <div>{/* inhoud */}</div>;
};
Er zijn verschillende manieren waarop u de postgegevens aan de Post kunt doorgeven. De methode die u kiest, hangt af van hoe u de pagina wilt renderen. Gebruik getStaticProps() om de gegevens tijdens het bouwen op te halen en gebruik getServerSideProps() om ze op verzoek op te halen.
GetStaticProps gebruiken om postgegevens op te halen
Blogposts veranderen niet zo vaak en het is voldoende om ze tijdens het bouwen op te halen. Pas dus de component Post aan om getStaticProps() op te nemen.
importeren { getSinglePost } van "../../utils/berichten";const Bericht = ({ inhoud }) => {
opbrengst <div>{/* inhoud */}</div>;
};
exporterenconst getStaticProps = asynchroon ({ parameters }) => {
const plaatsen = wachten getSinglePost (params.slug);
opbrengst {
rekwisieten: { ...post },
};
};
De functie getStaticProps genereert de berichtgegevens die op de pagina worden weergegeven. Het gebruikt de slug van de paden die zijn gegenereerd door de functie getStaticPaths.
GetStaticPaths gebruiken om paden op te halen
De functie getStaticPaths() retourneert de paden voor de pagina's die vooraf moeten worden weergegeven. Wijzig de component Post om deze op te nemen:
exporterenconst getStaticPaths = asynchroon () => {
const paden = getAllPosts().map(({ slug }) => ({ parameters: {slak} }));
opbrengst {
paden,
terugvallen: vals,
};
};
Deze implementatie van getStaticPaths haalt alle berichten op die moeten worden weergegeven en retourneert de slugs als params.
Al met al ziet [slug].js er zo uit:
importeren { getAllPosts, getSinglePost } van "../../utils/berichten";const Bericht = ({ inhoud }) => {
opbrengst <div>{inhoud}</div>;
};exporterenconst getStaticPaths = asynchroon () => {
const paden = getAllPosts().map(({ slug }) => ({ parameters: {slak} }));
opbrengst {
paden,
terugvallen: vals,
};
};exporterenconst getStaticProps = asynchroon ({ parameters }) => {
const plaatsen = wachten getSinglePost (params.slug);opbrengst {
rekwisieten: { ...post },
};
};
exporterenstandaard Na;
U moet getStaticProps() en getStaticPaths() samen gebruiken om een dynamische route te maken. De functie getStaticPaths() moet de dynamische routes genereren, terwijl getStaticProps() de gegevens ophaalt die op elke route worden weergegeven.
Geneste dynamische routes maken in Next.js
Om een geneste route in Next.js te maken, moet u een nieuwe map in de map Pages maken en de dynamische route daarin opslaan.
Om bijvoorbeeld /pages/posts/dynamic-routes-nextjs te maken, slaat u [slug].js op in /pages/posts.
Toegang tot URL-parameters van dynamische routes
Nadat u de route hebt gemaakt, kunt u de URL-parameter van de dynamische route met behulp van useRouter() Reageer haak.
Voor de pagina's/[slug].js, verkrijg de slug als volgt:
importeren { gebruikRouter } van 'volgende/router'const Bericht = () => {
const router = gebruikRouter()
const { slug } = router.query
opbrengst <P>Bericht: {slak}</P>
}
exporterenstandaard Na
Hierdoor wordt de naaktslak van de post weergegeven.
Dynamische routering met getServerSideProps
Met behulp van Next.js kunt u tijdens het bouwen gegevens ophalen en dynamische routes maken. U kunt deze kennis gebruiken om pagina's uit een lijst met items vooraf weer te geven.
Als u bij elk verzoek gegevens wilt ophalen, gebruikt u getServerSideProps in plaats van getStaticProps. Merk op dat deze aanpak langzamer is; u zou het alleen moeten gebruiken als u regelmatig veranderende gegevens consumeert.
