Le route dinamiche sono pagine che consentono di utilizzare parametri personalizzati in un URL. Sono particolarmente utili quando si creano pagine per contenuti dinamici.
Per un blog, puoi utilizzare un percorso dinamico per creare URL basati sui titoli dei post del blog. Questo approccio è migliore rispetto alla creazione di un componente di pagina per ogni post.
Puoi creare percorsi dinamici in Next.js definendo due funzioni: getStaticProps e getStaticPaths.
Creazione di un percorso dinamico in Next.js
Per creare un percorso dinamico in Next.js, aggiungi le parentesi a una pagina. Ad esempio, [params].js, [slug].js o [id].js.
Per un blog, potresti usare uno slug per il percorso dinamico. Quindi, se un post aveva lo slug percorsi-dinamici-nextjs, l'URL risultante sarebbe https://example.com/dynamic-routes-nextjs.
Nella cartella delle pagine, crea un nuovo file chiamato [slug].js e crea il componente Post che accetta i dati del post come prop.
cost Post = ({ postData }) => {
ritorno <div>{/* contenuto */}</div>;
};
Esistono diversi modi per passare i dati del post al Post. Il metodo che scegli dipende da come vuoi rendere la pagina. Per recuperare i dati durante la fase di compilazione, utilizzare getStaticProps() e per recuperarli su richiesta, utilizzare getServerSideProps().
Utilizzo di getStaticProps per recuperare i dati dei post
I post del blog non cambiano così spesso ed è sufficiente recuperarli al momento della creazione. Quindi, modifica il componente Post per includere getStaticProps().
importare { getSinglePost } da "../../utils/post";cost Messaggio = ({ contenuto }) => {
ritorno <div>{/* contenuto */}</div>;
};
esportarecost getStaticProps = asincrono ({ param }) => {
cost posta = aspetta getSinglePost (params.slug);
ritorno {
oggetti di scena: {... post },
};
};
La funzione getStaticProps genera i dati del post visualizzati sulla pagina. Usa lo slug dai percorsi generati dalla funzione getStaticPaths.
Utilizzo di getStaticPaths per recuperare i percorsi
La funzione getStaticPaths() restituisce i percorsi per le pagine che dovrebbero essere pre-renderizzate. Modifica il componente Post per includerlo:
esportarecost getStaticPath = asincrono () => {
cost percorsi = getAllPosts().map(({ slug }) => ({ parametri: { lumaca } }));
ritorno {
sentieri,
ricaderci: falso,
};
};
Questa implementazione di getStaticPaths recupera tutti i post che devono essere visualizzati e restituisce gli slug come parametri.
Complessivamente, [slug].js avrà questo aspetto:
importare { getAllPosts, getSinglePost } da "../../utils/post";cost Messaggio = ({ contenuto }) => {
ritorno <div>{contenuto}</div>;
};esportarecost getStaticPath = asincrono () => {
cost percorsi = getAllPosts().map(({ slug }) => ({ parametri: { lumaca } }));
ritorno {
sentieri,
ricaderci: falso,
};
};esportarecost getStaticProps = asincrono ({ param }) => {
cost posta = aspetta getSinglePost (params.slug);ritorno {
oggetti di scena: {... post },
};
};
esportarepredefinito Inviare;
È necessario utilizzare insieme getStaticProps() e getStaticPaths() per creare una route dinamica. La funzione getStaticPaths() dovrebbe generare gli instradamenti dinamici, mentre getStaticProps() recupera i dati resi in ogni instradamento.
Creazione di percorsi dinamici nidificati in Next.js
Per creare un percorso nidificato in Next.js, è necessario creare una nuova cartella all'interno della cartella delle pagine e salvare il percorso dinamico al suo interno.
Ad esempio, per creare /pages/posts/dynamic-routes-nextjs, salva [slug].js all'interno /pages/posts.
Accesso ai parametri URL da percorsi dinamici
Dopo aver creato il percorso, puoi recuperare il file Parametro dell'URL dal percorso dinamico utilizzando useRouter() Aggancio di reazione.
Per le pagine/[slug].js, ottieni lo slug in questo modo:
importare {usaRouter} da 'prossimo/router'cost Messaggio = () => {
cost router = usaRouter()
cost { slug } = router.query
ritorno <P>Messaggio: {slug}</P>
}
esportarepredefinito Inviare
Questo mostrerà la lumaca del post.
Instradamento dinamico con getServerSideProps
Utilizzando Next.js puoi recuperare i dati in fase di compilazione e creare percorsi dinamici. Puoi usare questa conoscenza per eseguire il pre-rendering delle pagine da un elenco di elementi.
Se vuoi recuperare i dati su ogni richiesta, usa getServerSideProps invece di getStaticProps. Si noti che questo approccio è più lento; dovresti usarlo solo quando consumi dati che cambiano regolarmente.
