Come creare percorsi dinamici in Next.js

I percorsi dinamici sono pagine che consentono di utilizzare parametri personalizzati in un URL. Sono particolarmente utili quando si creano pagine per contenuto dinamico.

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 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 avesse lo slug dynamic-routes-nextjs, l’URL risultante sarebbe https://example.com/dynamic-routes-nextjs.

Nella cartella pages, crea un nuovo file chiamato [slug].js e crea il componente Post che prende i dati del post come prop.

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

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().

Utilizzo di getStaticProps per recuperare i dati dei post

I post del blog non cambiano così spesso ed è sufficiente recuperarli in fase di compilazione. Quindi, modifica il componente Post per includere 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 },    };  };

La funzione getStaticProps genera i dati dei post visualizzati nella pagina. Utilizza lo slug dei percorsi generati dalla funzione getStaticPaths.

Utilizzo di getStaticPaths per recuperare i percorsi

La funzione getStaticPaths() restituisce i percorsi per le pagine che devono essere pre-renderizzate. Modifica il componente Post per includerlo:

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

Questa implementazione di getStaticPaths recupera tutti i post di cui è necessario eseguire il rendering e restituisce gli slug come parametri.

Complessivamente, [slug].js sarà simile a questo:

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;

È 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.

Creazione di percorsi dinamici nidificati in Next.js

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.

Ad esempio, per creare /pages/posts/dynamic-routes-nextjs, salva [slug].js all’interno di /pages/posts.

Accesso ai parametri URL da percorsi dinamici

Dopo aver creato la route, è possibile recuperare il parametro URL dalla route dinamica utilizzando l’hook useRouter() React.

Per le pagine/[slug].js, ottieni lo slug in questo modo:

import { useRouter } from 'next/router' const Post = () => {  const router = useRouter()  const { slug } = router.query  return <p>Post: {slug}</p>} export default Post

Questo mostrerà lo slug del post.

Routing dinamico con getServerSideProps

Usando Next.js puoi recuperare i dati in fase di compilazione e creare percorsi dinamici. È possibile utilizzare questa conoscenza per eseguire il pre-rendering di 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.