Next.js - Routage

Next.js utilise un routeur basé sur le système de fichiers. Chaque fois que nous ajoutons une page àpagesrépertoire, il est automatiquement disponible via url. Voici les règles de ce routeur.

  • Index Routes- Un fichier index.js présent dans un dossier correspond à la racine du répertoire. Par exemple -

    • pages / index.js correspond à '/'.

    • pages / posts / index.js correspond à «/ posts».

  • Nested Routes- Toute structure de dossier imbriquée dans le répertoire de pages car l'URL du routeur automatiquement. Par exemple -

    • pages / settings / dashboard / about.js correspond à '/ settings / dashboard / about'.

    • pages / posts / first.js correspond à '/ posts / first'.

  • Dynamic Routes- Nous pouvons également utiliser un paramètre nommé pour faire correspondre l'url. Utilisez des crochets pour le même. Par exemple -

    • pages / posts / [id] .js correspond à «/ posts /: id» où nous pouvons utiliser une URL comme «/ posts / 1».

    • pages / [user] /settings.js correspond à «/ posts /: user / settings» où nous pouvons utiliser une URL comme «/ abc / settings».

    • pages / posts / [... all] .js correspond à '/ posts / *' où nous pouvons utiliser n'importe quelle URL comme '/ posts / 2020 / jun /'.

Lien de page

Next.JS permet de lier des pages côté client à l'aide du composant Link react. Il a les propriétés suivantes -

  • href- nom de la page dans le répertoire des pages. Par exemple/posts/first qui fait référence à first.js présent dans le répertoire pages / posts.

Créons un exemple pour démontrer la même chose.

Dans cet exemple, nous mettrons à jour la page index.js et first.js pour créer un appel de serveur pour obtenir des données.

Mettons à jour le projet nextjs utilisé dans le chapitre Global CSS Support .

Mettez à jour le fichier index.js dans le répertoire pages comme suit.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et vous verrez la sortie suivante.

Cliquez sur le lien Premier message.