SEO: Un guide du débutant sur le routage dans Next.js, avec des exemples

SEO: Un guide du débutant sur le routage dans Next.js, avec des exemples

L’utilisation de Next.js présente de nombreux avantages, mais une fonctionnalité très utile est son système de routage de fichiers. Cette architecture a considérablement simplifié le processus de création d’itinéraires au sein d’un site Web. Dans ce tutoriel, nous allons apprendre comment configurer un projet Next.js et comment fonctionne le système de routage de fichiers dans Next.js.

Nous apprendrons également à :

  • créer des pages statiques et dynamiques
  • implémenter la transition de page avec Link, ainsi que certains de ses accessoires
  • Utilisez le useRouter() hook pour obtenir le paramètre de requête à partir de l’URL
  • imbriquer les routes dynamiquement

… et beaucoup plus.

Nous apprendrons tout cela en créant une page de portfolio.

Fonctionnalités de Next.js

Next.js est un framework Web basé sur React et construit sur Node.js. Comme il est basé sur React, il suit également la conception architecturale des composants.

Next.js peut être utilisé pour construire sites statiques. Ce sont des sites avec des pages qui sont pré-rendues et servies à l’utilisateur au moment de la construction. En termes simples, la page est disponible avant même que l’utilisateur ne le demande.

Il permet également d’utiliser le rendu côté serveur pour générer des pages Web dynamiques (pages qui changent chaque fois qu’un utilisateur fait une nouvelle demande).

L’architecture de routage dans Next.js facilite la création et la liaison de pages entre elles. Nous pouvons passer dynamiquement des paramètres de requête et créer des pages dynamiques sans avoir à quitter le pages dossier.

Pourquoi utiliser Next.js

Le framework Next.js a été publié pour la première fois le 25 octobre 2016. Depuis lors, il est devenu l’un des frameworks Web les plus populaires, pour plusieurs raisons.

D’une part, Next.js est fondamentalement React. C’est une excellente nouvelle pour l’immense communauté de développeurs issus de l’expérience React. Les développeurs peuvent toujours utiliser certaines fonctionnalités de React telles que l’architecture des composants, JSX, etc.

Deuxièmement, la capacité de pré-rendu pages à l’aide de Suivant. Par défaut, Next.js génère toutes les pages à l’avance, qui seront ensuite réutilisées à chaque demande d’utilisateur. Étant donné que le site est pré-généré, les robots des moteurs de recherche peuvent correctement indexer le site pour le référencement.

Comme dit, une fonctionnalité très utile est le système de routage de fichiers dans Next.js, qui a considérablement simplifié le processus de création de routes au sein d’un site Web. Vous pouvez donc créer un tas de .js fichiers dans un seul dossier nommé pages, que Next.js utilisera pour tous vos itinéraires. Non seulement c’est utile, mais c’est aussi très puissant.

Le projet

Le site aura deux routes simples et deux routes dynamiques (nous verrons la signification de celles-ci plus tard).

Les Projects La page affichera une liste de projets. En cliquant sur Voir plus, nous serons dirigés vers une seule page de projet.

Les blog page affichera une liste des articles de blog, et nous pouvons également afficher une seule page de blog en cliquant sur Lire la suite. La page contiendra des détails sur un article spécifique.

Démontrer imbrication d’itinéraires dans Next, nous allons également créer un fichier imbriqué /comments itinéraire pour chaque article de blog. Par exemple, nous pouvons consulter les commentaires du premier article en visitant localhost:3000/blog/first-post/comments.

Voici l’aperçu en direct du projet :

Vous pouvez obtenir le code à partir de son référentiel GitHub, exécutez-le sur votre machine et modifiez-le comme vous le souhaitez. Vous pouvez supprimer mes images et déplacer les vôtres vers le /public dossier. Il vous suffit de modifier les noms de fichiers dans le balisage.

Commencer

Pour commencer avec Next, vous devez avoir Node.js installé sur votre ordinateur. La version de Node ne doit pas être inférieure à 12.x. Vous pouvez vérifier la version en tapant node -v sur le terminal de commande.

Si Node.js n’est pas installé ou si vous avez une version plus ancienne, vous pouvez télécharger la dernière version à partir d’ici.

Après son téléchargement, nous devrons initialiser notre projet. Nous pouvons le faire automatiquement ou manuellement. Dans ce tutoriel, nous utiliserons le create-next-app générateur de code pour créer automatiquement un cadre de travail pour nous.

Veuillez naviguer jusqu’au dossier dans lequel vous souhaitez que le projet réside et tapez la commande suivante :

cd your/path
npx create-next-app next-portfolio

Enfin, exécutez la commande suivante :

Vous devriez voir ce qui suit sur la fenêtre de votre terminal, si tout s’est bien passé.

Projeter tout ensemble

Nous pouvons afficher la page sur le navigateur Web à l’adresse http://localhost:3000.

Prochain projet maintenant en ligne

L’architecture de routage basée sur des fichiers dans Next.js

Lorsque nous avons exécuté cette commande, nous avons créé un dossier nommé next-portfolio dans le répertoire courant. À l’intérieur next-portfolio, vous trouverez des dossiers et fichiers importants.

Structure du répertoire des applications

Le dossier dans lequel nous travaillerons le plus souvent est pages. Dans Suivant, chaque .js fichier défini à l’intérieur pages mappe sur un itinéraire du même nom :

  • pages/about.js mappera sur /about
  • pages/contact.js mappera sur /contact
  • pages/blog.js mappera sur /blog

Voici une représentation de haut niveau du dossier de pages dans un projet Next typique :

my-site

└── pages

    └── api 

    ├── _app.js 

    ├── index.js 

    ├── about.js 

    ├── contact.js 

    └── blog

        ├── index.js 

        ├── author.js 

        ├── [blog-id].js 

        └── [...slug].js 

Chaque composant React sera regroupé sous la forme d’un .js fichier, contenant le balisage et la logique pour chaque page.

Le dossier public

Next.js fournit un dossier public dans lequel vous pouvez stocker des ressources statiques telles que des images, des scripts personnalisés et des polices, et vous y référer à partir de vos composants/code.

Nous utiliserons les images suivantes dans diverses pages de notre site portfolio :

  • Une photo personnelle. Il sera utilisé sur la page d’accueil (index.js).
  • Quatre icônes de médias sociaux. Celui-ci sera utilisé sur la page de contact (contact.js).

Pages personnalisées

Vous avez peut-être remarqué la page _app.js dans votre dossier de pages. Cette page est une page personnalisée. Les pages personnalisées sont ne pas utilisés comme routes par Next.js, et ils sont préfixés par un trait de soulignement (_).

Next.js utilise le _app.js pour initialiser la page Web. Ce composant initialise l’application et transmet le pageProps prop, qui sont les données nécessaires à tous les composants imbriqués dans notre site Web.

Étant le composant racine, nous pouvons définir une mise en page que nous souhaitons conserver sur toutes les pages.

Nous pouvons également utiliser une feuille de style globale qui s’applique à tous les éléments, comme dans l’exemple suivant :



import Layout from '../components/Layout'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  ); 
}

export default MyApp

Indexer les itinéraires

Chaque fois que nous naviguons vers des routes d’indexation (aka pages d’accueil) telles que my-site.com, my-site.com/blog, ou my-site.com/projects, Next.js lira tous les fichiers de ce répertoire nommé index.js.

Donc en substance, pages/index.js renvoie le balisage de la page d’accueil, qui s’affiche à localhost:3000. pages/blog/index.js renvoie le balisage de la page d’accueil du blog, qui est à localhost:3000/blog.

Dans votre éditeur de code, rendez-vous sur la page d’index et supprimez tout le contenu du fichier. Le balisage suivant est utilisé à des fins de test :



import Image from 'next/image'
import Link from 'next/link'

export default function Home() {
  return (
    <div className="container">
      <h1>Hello World</h1>
    </div>  
    )
}

Remarque : emménagez dans next-portfolio/styles dans votre éditeur de texte et supprimez Home.module.css, car nous n’en aurons pas besoin du tout.

Enregistrez maintenant les modifications apportées au fichier et ouvrez http://localhost:3000. Les changements dans le fichier d’index se refléteront sur la route d’index.

Bonjour le monde

Tellement plus ira dans le index.js déposer. La section supérieure de la page d’accueil contiendra des liens de navigation. Cependant, il est plus intuitif de créer d’autres pages avant la page d’accueil, afin que nous puissions les lier correctement.

Pour cette raison, nous devrons d’abord créer certaines des autres pages avant de créer notre page d’accueil.

Routes statiques

Tout d’abord, nous allons créer deux routes statiques pour notre site portfolio. Ces itinéraires rendent données statiques: ils n’utilisent pas le paramètre de requête de l’URL pour le rendu des données.

Les deux routes statiques que nous allons créer sont about.js et contact.js. Ces fichiers seront pour le /about et /contact itinéraires respectivement.

Pour ce faire, naviguez dans next-portfolio/pages et créez un nouveau fichier nommé about.js. Le balisage de la page À propos ira à l’intérieur :



export default function About() {
    return (
        <div className="container">
            <h1> About me </h1>
            <p> My name is Kingsley Ubah. I'm a 22-year-old web developer from Nigeria. I'm particularly interested in technical writing. When I'm not coding or writing, I read my favorite books and play some cool video games. I'm a huge fan of good movies and football. Also, don't play with my food!</p>
            <p>I'm skilled in front-end web development. I'm equally good at the back end. Technologies I work well with include React, Node.js, Vue, Next, Gatsby, OAuth, MongoDB, MySQL and many others. </p>
            <p>I could keep going on and on about my life but I can guarantee that you'll be bored in the end. So I'll just end it right here.</p>
        </div>
    )
}

Remarque : bien sûr, vous pouvez personnaliser le contenu selon vos propres compétences si vous le souhaitez !

Maintenant, veuillez enregistrer les modifications apportées au fichier, passez à next-portfolio/styles/globals.css et saisissez les styles suivants :

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

html,
body {
  padding: 0;
  margin: 0;
  font-family: "lato", sans-serif;
  font-size: 20px;
  background-color: #D7E5f0;  
}

* {
  box-sizing: border-box;
}

h1 {
  font-size: 60px;
}

.logo {
  font-weight: 600;
  font-size: 30px;
}

p {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: black;
}

.container {
  margin: 0 auto;
  max-width: 1200px;
}

Remarque : encore une fois, allez en ville si vous souhaitez un ensemble de styles différent.

Enregistrez les modifications. Sur votre navigateur Web, accédez à http://localhost:3000/about.

La page À propos actuelle

Enfin, pour les pages statiques, veuillez créer un contact.js fichier à l’intérieur de pages et créer le Contact composant, comme ceci :



import Image from 'next/image'

export default function Contact() {
    return (
        <div className="container">
            <h1> Contact me </h1>
            <p> I'd love to hear from you. Want to reach out, you can contact me on the 
                following profiles</p>
            <ul className="contact">
                <div className="link">
                    <li>
                        <Image src='/facebook.png' height={20} width={20} /> 
                        <a href='https://facebook.com/UbahTheBuilder'> Like me on Facebook</a>
                      </li>
                </div>
                <div className="link">
                    <li>
                        <Image src='/twitter.png' height={20} width={20} /> 
                        <a href='https://twitter.com/UbahTheBuilder'> Follow me on Twitter</a>
                    </li>
                </div>
                <div className="link">
                    <li>
                        <Image src='/linkedin.png' height={20} width={20} /> 
                        <a href='https://linkedin.com/UbahTheBuilder'> Connect with me on LinkedIn</a>
                    </li>
                </div>
                <div className="link">
                    <li>
                        <Image src='/whatsapp.png' height={20} width={20} /> 
                        <a href='https://whatsapp.com/UbahTheBuilder'> Chat with me on Whatsapp</a>
                      </li>
                </div>
            </ul>

            <form>
                <input type="text" placeholder="your name" /> 
                <br />
                <input type="email" placeholder="your email address"  /> 
                <br />
                <input type="text" placeholder="subject" /> 
                <br />
                <textarea id="message" rows="15" cols="65" placeholder="your message"></textarea> 
                <br />
                <input type="submit" value="Reach out" />
            </form>
        </div>
    )
}

De ce composant, nous renvoyons une page contenant les liens vers les réseaux sociaux, ainsi qu’un formulaire de contact.

Pour les liens, vous remarquerez que nous avons importé et utilisé le Image composant fourni par next/image.

Les Image Le composant aide à créer des images mieux optimisées et réactives qui évoluent avec la taille de la fenêtre du navigateur.

Pour mieux le styler, n’hésitez pas à copier les styles suivants et à les coller dans la feuille de style globale :




.link {
  width: 500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 0;
  font-size: 17px;
}

input {
  height: 50px;
  width: 500px;
  margin: 10px 0;
  font-size: 17px;
  padding-left: 3px;
}

input[type=submit] {
  background-color: blue;
  color: white;
  border: none;
}

Veuillez enregistrer les modifications apportées au fichier et accédez à http://localhost:3000/contact.

Notre page de contact actuelle

Transitions de route côté client

La création de pages est un processus. Un utilisateur doit également pouvoir naviguer entre ces pages. Avec deux des quatre pages déjà implémentées, terminons maintenant la page d’accueil. Tout d’abord, nous allons au fichier d’index et modifions le Home composant, comme ceci :



import Image from 'next/image'
import Link from 'next/link'

export default function Home() {
  return (
    <div className="container">
      <div className="navbar">
        <div className="logo">Pragmatic Developer</div>
        <ul>
          <li>
            <Link href="/about">
              <a>About me</a>
            </Link>
          </li>
          <li>
            <Link href="/contact">
              <a>Contact me</a>
            </Link>
          </li>
          <li>
            <Link href="/blog">
              <a>Blog</a>
            </Link>
          </li>
          <li>
            <Link href="/projects">
              <a>Projects</a>
            </Link>
          </li>
        </ul>
      </div>
      <div className="profile">
        <Image src="/me.png" height={200} width={200} alt="My profile image" />        
          <div className="intro">
            <h1>Hi, I'm Kingsley</h1>
            <p>I am a web developer and technical writer</p>
        </div>
      </div>
    </div>
  )
}

Si vous avez déjà implémenté le routage côté client dans une application React, vous connaissez peut-être le Link composant de React Router.

Next.js nous fournit également un composant similaire, que nous avons importé de next/link.

Les Le composant est utilisé pour implémenter des transitions de page dans une application Next. La principale caractéristique de ce composant est qu’il vous permet de passer des paramètres de requête au useRouter, c’est ce que vous utilisez pour restituer le contenu sur des routes dynamiques.

À l’intérieur du balisage JSX, nous enregistrons le composant et passons en valide href attributs spécifiant les pages vers lesquelles nous voulons créer un lien à partir du menu de navigation.

Le composant peut également prendre en charge quelques propriétés, dont certaines sont présentées dans les sections suivantes.

as

Parfois, vous voudrez peut-être utiliser une URL personnalisée, probablement pour rendre l’URL plus lisible et sémantique.

Pour cela, vous pouvez transmettre le as propriété à Link, ainsi:

<ul>
    <li>
        <Link href="/about" as="/king">
          <a>About me</a>
        </Link>
    </li>
    <li>
        <Link href="/contact">
            <a>Contact me</a>
        </Link>
    </li>
    <li>
        <Link href="/blog">
          <a>Blog</a>
        </Link>
    </li>
    <li>
      <Link href="/projects">
          <a>Projects</a>
      </Link>
    </li>
</ul>

Image de comme

preFetch

J’ai mentionné que Next.js en tant que framework nous permet de pré-rendu des pages. Cette propriété nous permet de pré-extraire les ressources nécessaires pour afficher la page À propos en arrière-plan :

<Link href="/about" prefetch>
  <a>About me</a>
</Link>

Enregistrez maintenant le fichier. N’hésitez pas à utiliser les styles suivants dans votre feuille de style globale :




.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar ul {
  display: flex;
}

.profile {
  display: flex;
  max-width: 900px;
  margin: 180px auto;
}

li {
  list-style-type: none;
}

.navbar a {
  text-decoration: none;
  color: rgb(59, 58, 58);
  margin: 0 25px;
  transition: 0.2s;
}

.navbar a:hover {
  background-color: blue;
  color: white;
  padding: 8px 8px;
  border-radius: 6px;
}

.intro {
  margin: 0 90px;
}

.contact a {
  margin: 0 15px;
}

Enregistrez les styles dans le fichier et accédez à http://localhost:3000 sur votre navigateur Web.

La page d'accueil actuelle

En cliquant sur Contact sur le menu de navigation, vous remarquerez que l’on peut désormais passer de la page d’accueil à la page Contact.

Itinéraires dynamiques

Dans Next.js, itinéraires dynamiques sont des routes spéciales qui restituent le contenu de manière dynamique, en fonction de la requête id à partir de l’URL.

Les routes dynamiques sont gérées par des fichiers spéciaux, définis avec le [param].js convention. param est obtenu à partir de l’objet de requête.

Ainsi, au lieu de définir différents fichiers pour différentes routes, comme dans :

  • blog/first-post.js pour /blog/first-post
  • blog/second-post.js pour /blog/second-post
  • blog/third-post.js pour /blog/third-post

… nous pouvons définir un seul page dynamique pour gérer n’importe quel itinéraire dynamique dans /blog:

Chaque fois que vous accédez à l’une des URL ci-dessus, comme dans les cas suivants :

<li><Link href="/blog/1"><a>Visit my first post</a></Link></li>

… à l’intérieur du composant dynamique, nous pouvons accéder à l’ID de la requête (c’est-à-dire 1, 2 ,3, first-post, et ainsi de suite) à partir de l’URL.

Nous le faisons en important et en appelant le hook useRouter(). Ensuite, nous déconstruisons le param valeur de la router objet et décidez quoi rendre en fonction de cela.

Donc, si vous naviguez vers blog/1 à partir d’une page d’accueil, le :id de 1 peut être obtenu comme ceci :

import {useRouter} from 'next/router'

export default function Blog() {
    const router = useRouter();
    const {id} = router.query;

return (
        <div className="container">
            <h1> You are now reading article {id} </h1> 
        </div>
    )
    
 }

Vous pouvez également utiliser des chaînes de requête au lieu de chemins d’URL complets :

<li><Link href="/blog?title=my-first-post"><a>Visit my first post</a></Link></li>

Remarque : généralement, vous interrogez une base de données à l’aide de l’ID de requête, puis récupérez un enregistrement de données correspondant qui sera affiché sur la page dynamique. Dans ce didacticiel, j’utiliserai des données fictives JSON pour simplifier les choses.

Création de la page Projets

La première page dynamique sera pour les projets.

À l’intérieur pages, créez un nouveau dossier nommé projects. Ensuite, dans le nouveau dossier, créez un fichier nommé index.js.

Ce fichier renverra ce qui s’affichera lorsque nous afficherons http://localhost:3000/projects sur un navigateur Web. En d’autres termes, ce sera la page d’accueil de /projects.

Nous avons également besoin de données fictives JSON pour les projets. À l’intérieur pages, créez un fichier nommé projects.json. Créez ensuite un tableau de vos propres projets, comme ceci :



[
    {
        "id": 1,
        "cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633599028SkilllzLanding.png",
        "title": "Skilllz",
        "slug": "projects/first-project",
        "excerpt": "A Sleek Purple Landing Page For an online training platform. Learn some important CSS concepts by building a landing page"
    },
    {
        "id": 2,
        "title": "Movie Generator App",
        "cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633599458moviegenerator.png",
        "slug": "projects/second-project",
        "excerpt": "Learn how to build CRUD applications with React and HarperDB. This in depth tutorials covers a lot about API integartion"
    },
    {
        "id": 3,
        "title": "Hacker News Clone",
        "cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633599423hackernewsclone.png",
        "slug":  "projects/third-project",
        "excerpt": "Have you always wanted to clone a web page? Build a Hacker News Clone using React and HarperDB. Get started with it now"
    }
]

Le JSON contient les données des projets que nous souhaitons afficher sur http://localhost:3000/projects.

Après cela, nous apporterons ces données dans le balisage, comme suit :



import Portfolios  from '../projects.json'
import Link from 'next/link'

export default function Projects() {
    return (
        <div className="container">
            <h1> My Projects </h1>
            <div className="projects">
                    {Portfolios.map(portfolio => {
                        return(
                            <div className="project" key={portfolio.id}>
                                <img src={portfolio.cover} alt="project image" />
                                <h2>{portfolio.title}</h2>
                                <p>{portfolio.excerpt}</p>
                                <Link href={portfolio.slug}><a>View More</a></Link>
                            </div>
                        )}
                    )}
            </div>
        </div>
    )
}

La première chose que nous avons faite a été d’importer les données. Ensuite, nous avons mappé chaque projet dans le modèle JSX à l’aide du JavaScript map() fonction.

Nous devons également le rendre plus présentable, alors n’hésitez pas à utiliser les styles suivants :

// next-portfolio/styles/globals.css


.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.project img {
  height: 100px;
  width: 200px;
}

.project a {
  color: white;
  background-color: black;
  padding: 10px 10px;
  border-radius: 6px;
}

.project {
  max-width: 500px;
  background-color: blue;
  border-radius: 6px;
  color: white;
  padding: 30px 30px;
  margin: 30px 0;
}

Pour afficher la page sur le navigateur, accédez à http://localhost:3000/projects.

Liste des projets

Page de projet unique

Maintenant, nous devons implémenter la route dynamique pour afficher un seul projet. Donc, si nous naviguons vers http://localhost:3000/projects/1, le premier projet sera affiché.

À l’intérieur du dossier des projets dans pages, créez un nouveau fichier nommé [project].js.

Ce fichier rendra la page dynamique a pour un seul projet, comme sur projects/1, projects/2 etc.

À l’intérieur du fichier, nous définissons le modèle qui sera utilisé pour une seule page de projet, comme ceci :



import {useRouter} from 'next/router'

export default function Project() {
    const router = useRouter();
    const {project} = router.query;
    
        
    return (
        <div className="container">
            <div>
                   <h1>This is the {project}</h1> 
                   <p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                   <p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                   <p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    )
}

Remarque : à partir de l’objet routeur, nous récupérons l’ID de requête de l’objet requête. En règle générale, vous utilisez cette clé pour effectuer une requête API pour un enregistrement correspondant. De cette façon, vous pouvez également afficher un message d’erreur pour les cas où un projet correspondant n’est pas trouvé dans la base de données.

Comme nous n’avons pas d’API pour interroger un projet, nous affichons à la place le slug d’URL avec quelques éléments statiques lorem ipsum texte. Le slug identifie quelle page est rendue.

L’image suivante montre comment la page peut changer en fonction de l’URL.

Page de projet unique

Routes d’imbrication

Prenons l’exemple d’un blog. Lorsque l’utilisateur accède à my-site.com/blog, une liste d’articles de blog s’affiche.

Lorsque l’utilisateur accède à my-site/blog/first-post, le premier article de blog s’affiche. Et quand ils naviguent vers my-site/blog/first-post/comments, il y aura tous les commentaires relatifs au premier post. C’est appelé imbrication d’itinéraires.

Dans Next.js, vous pouvez également imbriquer des routes dynamiques. Chaque route enfant peut accéder à la requête :id du parent. De cette façon, my-site.com/blog/first-post/comments sera différent de, disons, my-site.com/blog/second-post/comments, parce que vous pouvez vérifier le post :id à partir de l’URL ou de l’objet de requête, en utilisant useRouter().

En fait, nous allons faire quelque chose de similaire avec notre page de blog. Chaque article de blog aura son propre ensemble de commentaires. En d’autres termes, nous allons imbriquer une page dynamique nommée [comments].js dans une autre page dynamique, nommée [blog].js.

Création de la page d’accueil du blog

Avant de commencer l’imbrication de routes, nous allons d’abord créer la page d’accueil du blog.

Pour ce faire, cd dans next-portfolio/pages et créez un dossier nommé blog. Dans le nouveau dossier, créez un fichier nommé index.js.

Ce fichier renverra ce qui est affiché sur http://localhost:3000/blog. En d’autres termes, c’est la page d’accueil de cet itinéraire.

Ensuite, nous créons des données pour les articles de blog :



[
    {
        "id": 1,
        "cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633515082detectcanva.png",
        "title": "How to detect the operating system in React and Render accordingly",
        "slug": "blog/first-post",
        "excerpt": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        "body": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    },
    {
        "id": 2,
        "title": "Learn all about the JavaScript reduce method",
        "cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633515150jsreduce.png",
        "slug": "blog/second-post",
        "excerpt": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        "body": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    },
    {
        "id": 3,
        "title": "Understanding React props",
        "cover": "https://uploads.sitepoint.com/wp-content/uploads/2021/10/1633515109react-props-2.png",
        "slug":  "blog/third-post",
        "excerpt": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        "body": "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    }
]

Le tableau JSON contient des articles de blog que nous afficherons sur notre page de blog. Normalement, ces données doivent être obtenues à partir d’une API et non stockées dans un objet JSON.

Ensuite, importez-le et utilisez-le dans le balisage, comme ceci :



import Posts from '../posts.json'
import Link from 'next/link'

export default function Blogs() {
    return (
        <div className="container">
            <h1> Latest Posts </h1>
            <div className="posts">
                    {Posts.map(post => {
                        return(
                            <div className="post" key={post.id}>
                                <img src={post.cover} />
                                <h2>{post.title}</h2>
                                <p>{post.excerpt}</p>
                                <Link href={post.slug}>
                                  <a>Read Post</a>
                                </Link>
                            </div>
                        )}
                    )}
            </div>
        </div>
    )
}

Pour améliorer l’apparence de la page, voici quelques styles :

// next-portfolio/styles/globals.css


.posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

.post-container {
  margin: 15px auto;
  max-width: 900px;
}

.post-container img {
  width: 100%;
}

.post img {
  height: 300px;
  width: 500px;
}

.posts a {
  background-color: black;
  color: #D7E5f0;
  padding: 10px 10px;
  cursor: pointer;
  margin: 30px 0;
  border-radius: 6px;
}

.post {
  background-color: white;
  margin: 30px 0;
  padding: 30px 30px;
  border-radius: 6px;
}

Veuillez maintenant naviguer vers http://localhost:3000/blog sur votre navigateur Web.

Page du blog

Affichage d’un seul article et de commentaires imbriqués

Dans cette section, nous allons faire deux choses :

  • créer une page pour un seul article de blog
  • création d’une route imbriquée dynamique pour afficher les commentaires

Pour ce faire, allez dans pages/blog et créez un nouveau dossier nommé [blog]. Dans le dossier, créez deux fichiers, [index].js et [comments].js

my-site

└── pages

    ├── index.js 

    └── blog

        ├── index.js 

        └── [blog] 
                  
            ├── [index].js 
               
            ├── [comments].js 

Aller vers [index].js et tapez le code suivant :

import {useRouter} from 'next/router'
import Link from 'next/link'
import Posts from '../../posts.json'

export default function Blog() {
    const router = useRouter();
    const {blog} = router.query;
    const fullPath = blog+"/comments";
        
    if (blog === "first-post") {
    return (
        <div className="post-container">
            <div>
                    <img src={Posts[0].cover} alt="post image" />    
                   <h1> {Posts[0].title}</h1>
                   <p>{Posts[0].body}</p>
                   <p>{Posts[0].body}</p>
                   <p>{Posts[0].body}</p>
                   <hr />
                   <div className="comments">
                        <h3>Comments</h3>
                        <h5>Marina Costa</h5>
                        <p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
                        <Link href={fullPath}>
                          <a>Read all comments for this article</a>
                        </Link>
                   
                   </div>
            </div>
        </div>
    )
    } else if (blog === "second-post") {
        return (
        <div className="post-container">
            <div>
                    <img src={Posts[1].cover} alt="post image"/> 
                    <h1> {Posts[1].title}</h1>
                   <p>{Posts[1].body}</p>
                   <p>{Posts[1].body}</p>
                   <p>{Posts[1].body}</p>
                   <hr />
                   <div className="comments">
                        <h3>Comments</h3>
                        <p>Marina Costa</p>
                        <p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
                        <Link href={fullPath}>
                          <a>Read all comments for this article</a>
                        </Link>
                   
                   </div>
            </div>
        </div>
        )
    } else {
        return (
        <div className="post-container">
            <div>
                    <img src={Posts[2].cover} alt="post image"/> 
                    
                   <h1> {Posts[2].title}</h1>
                   <p>{Posts[2].body}</p>
                   <p>{Posts[2].body}</p>
                   <p>{Posts[2].body}</p>
                   <hr />
                   <div className="comments">
                        <h3>Comments</h3>
                        <h5>Marina Costa</h5>
                        <p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
                        <Link href={fullPath}>
                          <a>Read all comments for this article</a>
                        </Link>
                   
                   </div>
            </div>
        </div>
        )}
}

Veuillez noter que, dans un projet réel, vous n’aurez pas besoin d’un if déclaration conditionnelle à rendre basée sur le post :id. C’est parce que vous auriez généralement tous les messages stockés dans une base de données. Ensuite, vous interrogeriez l’API uniquement pour la publication qui correspond à l’ID de la requête.

Le code pour cela ressemblerait à ceci:

import Link from 'next/link'

export default function Blog( {post} ) {
    
    return (
        <div className="post-container">
            <div>
                   <img src={posts.cover} alt="post image" />    
                   <h1> {post.title}</h1>
                   <p>{post.body}</p>
                   <hr />
                   <div className="comments">
                        <h3>Comments</h3>
                        <h5>{post.commenter}</h5>
                        <p>{post.featured_comment}</p>
                        <Link href={post.fullPath}>
                          <a>Read all comments for this article</a>
                        </Link>
                   </div>
            </div>
        </div>
    )}
}

export async const getStaticProps = ({ params }) => {
  const res = await fetch(`https://your-api.com/posts/${params.title}`);
  const post = await res.json();
    return {
      props: { post },
    };
}

Observez comment nous avons éliminé le besoin de useRouter(). Ceci est dû au fait getStaticProps() prend automatiquement l’ID de la requête du param objet, qui fait partie de l’objet de contexte. Un objet de publication qui correspond à ce titre est ensuite récupéré à partir de l’API et transmis en tant que props dans le Blog composant.

Maintenant que nous avons établi la bonne façon de récupérer les données externes, il est temps de voir à quoi ressemblerait une page de publication unique : http://localhost:3000/blog/first-post.

Premier article de blog

Itinéraire imbriqué à partir des commentaires

Vous souvenez-vous encore du [comments].js fichier que nous avons créé plus tôt? Next.js traitera cette page comme une page imbriquée :



import {useRouter} from 'next/router'

export default function Comments() {
    const router = useRouter();
    const {blog} = router.query;
    
    return (
        <div className="container">
            <div>
                    <h2> You are now reading the comments from the {blog} </h2>
                    <div className="comments">
                        <h3>Comments</h3>
                        <hr />
                        <h5>Marina Costa</h5>
                        <p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
                        <hr />
                        <h5>Marina Costa</h5>
                        <p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
                        <hr />
                        <h5>Marina Costa</h5>
                        <p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
                        <hr />
                        <h5>Marina Costa</h5>
                        <p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
                        <hr />
                        <h5>Marina Costa</h5>
                        <p>Absolutely spot on! Thanks for sharing, Kingsley!</p>
                        <hr />
                        <h5>Marina Costa</h5>
                        <p>Absolutely spot on! Thanks for sharing, Kingsley!</p>                    
                    </div>
            </div>
        </div>
    )
}

Voici ce que vous feriez généralement dans un projet réel :

export default function Comments( {comments} ) {
        
    return (
        <div className="container">
            <div>
                    <h2> You are now reading the comments from the {blog} </h2>
                    <div className="comments">
                        {comments.map(comment => {
                        return(
                            <div className="comment" key={comment.id}>
                                <h5>{comment.name}</h5>
                                <p>{comment.body}</p>
                                <hr />
                            </div>
                        )}
                    )}              
                    </div>
            </div>
        </div>
    )
}

export async const getStaticProps = ({ params }) => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/blog-comments/${params.title}`);
  const comments = await res.json();
    return {
      props: { comments },
    };
}

Commentaires du premier message

Emballer

Le routage de page dans Next.js est l’un des concepts les plus importants à connaître dans Next. C’est également la fonctionnalité la plus puissante car vous pouvez structurer votre site Web comme vous le souhaitez et transmettre des données entre les itinéraires en les imbriquant.

Dans ce didacticiel, nous avons beaucoup appris sur la mise en œuvre du routage de page dans Next.js en créant un site Web de portefeuille simple. J’espère que vous l’avez trouvé utile. Si vous avez des commentaires, contactez-moi sur Twitter.

#guide #débutant #sur #routage #dans #Nextjs #avec #des #exemples