Lier deux pages dans Next.js à l'aide de Link

Comment lier deux ou plusieurs pages dans Next.js

Ce didacticiel commence là où lepremier tutoriel Next.jslaisser derrière soi. Nous avons construit un site avec une page:

Je souhaite ajouter une deuxième page à ce site Web, une liste d'articles de blog. Il va être servi dans/blog, et pour le moment, il ne contiendra qu'une simple page statique, tout comme notre premièreindex.jscomposant:

Après avoir enregistré le nouveau fichier, lenpm run devprocessus déjà en cours d'exécution est déjà capable de rendre la page, sans qu'il soit nécessaire de la redémarrer.

Lorsque nous atteignons l'URLhttp: // localhost: 3000 / blognous avons la nouvelle page:

et voici ce que le terminal nous a dit:

Maintenant, le fait que l'URL soit/blogdépend uniquement du nom du fichier et de sa position sous lepagesdossier.

Vous pouvez créer unpages/hey/hopage, et cette page s'affichera sur l'URLhttp: // localhost: 3000 / hey / ho.

Ce qui n'a pas d'importance, pour les besoins de l'URL, c'est le nom du composant à l'intérieur du fichier.

Essayez d'aller voir la source de la page, une fois chargée à partir du serveur, elle listera/_next/static/development/pages/blog.jscomme l'un des lots chargés, et non/_next/static/development/pages/index.jscomme dans la page d'accueil. En effet, grâce au fractionnement automatique du code, nous n'avons pas besoin du bundle qui dessert la page d'accueil. Juste le bundle qui dessert la page du blog.

Nous pouvons également simplement exporter une fonction anonyme depuisblog.js:

export default () => (
  <div>
    <h1>Blog</h1>
  </div>
)

ou si vous préférez la syntaxe de la fonction sans flèche:

export default function() {
  return (
    <div>
      <h1>Blog</h1>
    </div>
  )
}

Maintenant que nous avons 2 pages, définies parindex.jsetblog.js, nous pouvons introduire des liens.

Les liens HTML normaux dans les pages sont créés à l'aide duaétiqueter:

<a href="/blog">Blog</a>

Nous ne pouvons pas faire cela dans Next.js.

Pourquoi? Nous techniquementpeut, bien sûr, car c'est le Web etsur le Web, les choses ne se cassent jamais(c'est pourquoi nous pouvons toujours utiliser le<marquee>étiqueter. Mais l'un des principaux avantages de l'utilisation de Next est qu'une fois qu'une page est chargée, les transitions vers une autre page sont très rapides grâce au rendu côté client.

Si vous utilisez une plainealien:

const Index = () => (
  <div>
    <h1>Home page</h1>
    <a href='/blog'>Blog</a>
  </div>
)

export default Index

Ouvrez maintenant leDevTools, et lePanneau de réseauen particulier. La première fois que nous chargeonshttp://localhost:3000/nous obtenons tous les lots de pages chargés:

Maintenant, si vous cliquez sur le bouton "Conserver le journal" (pour éviter d'effacer le panneau Réseau), et cliquez sur le lien "Blog", voici ce qui se passe:

Nous avons encore une fois obtenu tout ce JavaScript du serveur! Mais ... nous n'avons pas besoin de tout ce JavaScript si nous l'avons déjà. Nous aurions juste besoin dublog.jsensemble de pages, le seul qui soit nouveau sur la page.

Pour résoudre ce problème, nous utilisons un composant fourni par Next, appelé Link.

Nous l'importons:

import Link from 'next/link'

puis nous l'utilisons pour envelopper notre lien, comme ceci:

import Link from 'next/link'

const Index = () => ( <div> <h1>Home page</h1> <Link href=’/blog’> <a>Blog</a> </Link> </div> )

export default Index

Maintenant, si vous réessayez ce que nous avons fait précédemment, vous pourrez voir que seul leblog.jsle bundle est chargé lorsque nous passons à la page du blog:

et la page s'est chargée plus rapidement qu'auparavant, le spinner habituel du navigateur sur l'onglet n'apparaissait même pas. Pourtant, l'URL a changé, comme vous pouvez le voir. Cela fonctionne de manière transparente avec le navigateurAPI historique.

C'est le rendu côté client en action.

Et si vous appuyez maintenant sur le bouton retour? Rien n'est en cours de chargement, car le navigateur a toujours l'ancienindex.jsbundle en place, prêt à charger le/indexroute. Tout est automatique!

Ce n'est pas la seule façon de gérer les liens dans Next.js, mais je pense que c'est la plus simple.

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: