I percorsi dinamici sono pagine che consentono di utilizzare parametri personalizzati in un URL. Sono particolarmente utili quando si creano pagine per contenuto dinamico.<\/p>\n
Per un blog, puoi utilizzare un percorso dinamico per creare URL basati sui titoli dei post del blog. Questo approccio \u00e8 migliore rispetto alla creazione di un componente di pagina per ogni post.<\/p>\n
Puoi creare percorsi dinamici in Next.js definendo due funzioni: getStaticProps e getStaticPaths.<\/p>\n
Per creare un percorso dinamico in Next.js, aggiungi parentesi a una pagina. Ad esempio, [params].js, [slug].js o [id].js.<\/p>\n
Per un blog, potresti usare uno slug per il percorso dinamico. Quindi, se un post avesse lo slug dynamic-routes-nextjs<\/strong>, l’URL risultante sarebbe https:\/\/example.com\/dynamic-routes-nextjs<\/a>.<\/p>\n Nella cartella pages, crea un nuovo file chiamato [slug].js e crea il componente Post che prende i dati del post come prop.<\/p>\n Esistono diversi modi per trasferire i dati del post al Post. Il metodo che scegli dipende da come vuoi renderizzare la pagina. Per recuperare i dati durante la fase di compilazione, utilizzare getStaticProps() e per recuperarli su richiesta, utilizzare getServerSideProps().<\/p>\n I post del blog non cambiano cos\u00ec spesso ed \u00e8 sufficiente recuperarli in fase di compilazione. Quindi, modifica il componente Post per includere getStaticProps().<\/p>\n La funzione getStaticProps genera i dati dei post visualizzati nella pagina. Utilizza lo slug dei percorsi generati dalla funzione getStaticPaths.<\/p>\n La funzione getStaticPaths() restituisce i percorsi per le pagine che devono essere pre-renderizzate. Modifica il componente Post per includerlo:<\/p>\n Questa implementazione di getStaticPaths recupera tutti i post di cui \u00e8 necessario eseguire il rendering e restituisce gli slug come parametri.<\/p>\n Complessivamente, [slug].js sar\u00e0 simile a questo:<\/p>\n \u00c8 necessario utilizzare getStaticProps() e getStaticPaths() insieme per creare un percorso dinamico. La funzione getStaticPaths() dovrebbe generare i percorsi dinamici, mentre getStaticProps() recupera i dati resi a ogni percorso.<\/p>\n Per creare un percorso nidificato in Next.js, devi creare una nuova cartella all’interno della cartella delle pagine e salvare il percorso dinamico al suo interno.<\/p>\n Ad esempio, per creare \/pages\/posts\/dynamic-routes-nextjs, salva [slug].js all’interno di \/pages\/posts.<\/strong><\/p>\n Dopo aver creato la route, \u00e8 possibile recuperare il parametro URL<\/a> dalla route dinamica utilizzando l’hook useRouter() React<\/a>.<\/p>\n Per le pagine\/[slug].js, ottieni lo slug in questo modo:<\/p>\n Questo mostrer\u00e0 lo slug del post.<\/p>\n Usando Next.js puoi recuperare i dati in fase di compilazione e creare percorsi dinamici. \u00c8 possibile utilizzare questa conoscenza per eseguire il pre-rendering di pagine da un elenco di elementi.<\/p>\n Se vuoi recuperare i dati su ogni richiesta, usa getServerSideProps invece di getStaticProps. Si noti che questo approccio \u00e8 pi\u00f9 lento; dovresti usarlo solo quando consumi dati che cambiano regolarmente.<\/p>\nconst Post = ({ postData }) => { return <div>{\/* content *\/}<\/div>;};<\/code><\/pre>\nUtilizzo di getStaticProps per recuperare i dati dei post<\/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>\nUtilizzo di getStaticPaths per recuperare i percorsi<\/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>\nCreazione di percorsi dinamici nidificati in Next.js<\/h2>\n
Accesso ai parametri URL da percorsi dinamici<\/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>\nRouting dinamico con getServerSideProps<\/h2>\n