Contenu dynamique dans Next.js avec le routeur

Comment configurer le contenu dynamique dans un site Next.js

Dans lepost précédentnous avons vu comment lier la maison à la page du blog.

Un blog est un excellent cas d'utilisation pour Next.js, que nous continuerons d'explorer dans ce chapitre en ajoutantarticles de blog.

Les articles de blog ont une URL dynamique. Par exemple, un message intitulé "Hello World" peut avoir l'URL/blog/hello-world. Un message intitulé "Mon deuxième message" peut avoir l'URL/blog/my-second-post.

Ce contenu est dynamique et peut provenir d'une base de données, de fichiers de démarque ou plus.

Next.js peut diffuser du contenu dynamique basé sur unURL dynamique.

Nous créons une URL dynamique en créant une page dynamique avec le[]syntaxe.

Comment? Nous ajoutons unpages/blog/[id].jsdéposer. Ce fichier gérera toutes les URL dynamiques sous le/blog/itinéraire, comme ceux que nous avons mentionnés ci-dessus:/blog/hello-world,/blog/my-second-postet plus.

Dans le nom du fichier,[id]entre crochets signifie que tout ce qui est dynamique sera placé dans leidparamètre de lapropriété de requêtede larouteur.

Ok, c'est un peu trop de choses à la fois.

Quel est lerouteur?

Le routeur est une bibliothèque fournie par Next.js.

Nous l'importons denext/router:

import { useRouter } from "next/router";

et une fois que nous avonsuseRouter, nous instancions l'objet routeur en utilisant:

const router = useRouter();

Une fois que nous avons cet objet routeur, nous pouvons en extraire des informations.

En particulier, nous pouvons obtenir la partie dynamique de l'URL dans le[id].jsfichier en accédantrouter.query.id.

Continuons donc et appliquons toutes ces choses dans la pratique.

Créer le fichierpages/blog/[id].js:

import { useRouter } from "next/router";

export default () => { const router = useRouter();

return ( <> <h1>Blog post</h1> <p>Post id: {router.query.id}</p> </> ); };

Maintenant, si vous allez auhttp://localhost:3000/blog/testrouteur, vous devriez voir ceci:

Nous pouvons utiliser ceciidparamètre pour rassembler le message à partir d'une liste de messages. À partir d'une base de données, par exemple. Pour garder les choses simples, nous ajouterons unposts.jsonfichier dans le dossier racine du projet:

{
  "test": {
    "title": "test post",
    "content": "Hey some post content"
  },
  "second": {
    "title": "second post",
    "content": "Hey this is the second post content"
  }
}

Nous pouvons maintenant l'importer et rechercher le message à partir duidclé:

import { useRouter } from "next/router";
import posts from "../../posts.json";

export default () => { const router = useRouter();

const post = posts[router.query.id];

return ( <> <h1>{post.title}</h1> <p>{post.content}</p> </> ); };

Le rechargement de la page devrait nous montrer ce résultat:

Mais ce n'est pas! Au lieu de cela, nous obtenons une erreur dans la console et une erreur dans le navigateur également:

Pourquoi? Car .. lors du rendu, lorsque le composant est initialisé, les données ne sont pas encore là. Nous verrons comment fournir les données au composant avec getInitialProps dans la prochaine leçon.

Pour l'instant, ajoutez un peuif (!post) return <p></p>vérifiez avant de renvoyer le JSX:

import { useRouter } from "next/router";
import posts from "../../posts.json";

export default () => { const router = useRouter();

const post = posts[router.query.id]; if (!post) return <p></p>;

return ( <> <h1>{post.title}</h1> <p>{post.content}</p> </> ); };

Maintenant, les choses devraient fonctionner. Au départ, le composant est rendu sans la dynamiquerouter.query.idinformations. Après le rendu, Next.js déclenche une mise à jour avec la valeur de la requête et la page affiche les informations correctes.

Et si vous regardez la source, il y a ce vide<p>balise dans le HTML:

Nous allons bientôt résoudre ce problème qui ne parvient pas à mettre en œuvre SSR et cela nuit à la fois aux temps de chargement pour nos utilisateurs, au référencement et au partage social, comme nous l'avons déjà mentionné.

Nous pouvons compléter l'exemple de blog en listant ces articles danspages/blog.js:

import posts from "../posts.json";

const Blog = () => ( <div> <h1>Blog</h1>

<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
  {Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">posts</span>).<span style="color:#a6e22e">map</span>((<span style="color:#a6e22e">value</span>, <span style="color:#a6e22e">index</span>) =&gt; {
    <span style="color:#66d9ef">return</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">key</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">index</span>}<span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">title</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;;</span>
  })}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>

</div> );

export default Blog;

Et nous pouvons les lier aux pages d'articles individuels, en importantLinkdenext/linket en l'utilisant dans la boucle des messages:

import Link from "next/link";
import posts from "../posts.json";

const Blog = () => ( <div> <h1>Blog</h1>

<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
  {Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">posts</span>).<span style="color:#a6e22e">map</span>((<span style="color:#a6e22e">value</span>, <span style="color:#a6e22e">index</span>) =&gt; {
    <span style="color:#66d9ef">return</span> (
      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">key</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">index</span>}<span style="color:#f92672">&gt;</span>
        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/blog/[id]"</span> <span style="color:#a6e22e">as</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">"/blog/"</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">0</span>]}<span style="color:#f92672">&gt;</span>
          <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">a</span><span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">title</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/a&gt;</span>
        <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/Link&gt;</span>
      <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span>
    );
  })}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>

</div> );

export default Blog;

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: