Next.js Notions de base : création de pages et Routing explications de base

Dans le processus de développement d’applications Web, la gestion des pages et la navigation entre elles sont un aspect crucial. Dans cette série d'articles, nous approfondirons les principes fondamentaux de la création de pages et de la mise en œuvre de la navigation dans Next.js. Ces concepts fondamentaux sont essentiels pour créer des applications Web flexibles et gérables.

Création et affichage de la première page

Tout d’abord, comprenons comment créer et afficher une page simple dans Next.js. Vous pouvez créer des pages en créant des fichiers dans le pages répertoire de votre projet. Par exemple, pour créer une page d'accueil, vous pouvez créer un fichier nommé welcome.js dans le pages répertoire.

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;  

Dans l'extrait de code ci-dessus, nous avons créé une simple page de bienvenue. Lorsque vous accédez au /welcome chemin dans votre navigateur Web, vous verrez le message "Bienvenue sur Next.js !" affiché.

Basique Routing

Next.js propose un système robuste et intuitif routing qui facilite la navigation entre les pages. Routing in Next.js est basé sur le pages répertoire, chaque fichier de ce répertoire correspondant à un chemin spécifique. Par exemple, un fichier nommé about.js dans le pages répertoire créera une page accessible au niveau du /about chemin.

Création de liens et navigation

Pour créer des liens entre les pages et naviguer entre elles, nous pouvons utiliser le <Link> composant de la next/link bibliothèque. Vous trouverez ci-dessous un exemple de création d'un lien depuis la page d'accueil vers la page à propos de nous.

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;  

Dans l'exemple ci-dessus, lorsque vous cliquez sur le lien « En savoir plus sur nous », vous serez redirigé vers la /about page.

Conclusion

Dans cette section, nous avons exploré comment créer et afficher des pages simples Next.js et comment implémenter la navigation entre les pages à l'aide du pages répertoire et du <Link> composant. Ce sont des étapes initiales cruciales dans la création d’une Next.js application. Dans les prochains articles, nous continuerons à explorer d'autres aspects de Next.js la création d'applications Web dynamiques et interactives.