Principe fondamental de fonctionnement du framework NextJS
Dans les leçons précédentes, nous avons installé le framework NextJS et nous sommes familiarisés avec sa structure de base. Il est temps de passer au travail principal.
La partie principale de NextJS est le routage. Le routage fonctionne ainsi : lorsque l'utilisateur saisit dans la barre d'adresse du navigateur une certaine URL, le framework NextJS va renvoyer au navigateur un fichier spécifique, correspondant à cette URL.
Le routage dans NextJS est conçu d'une manière particulière.
Son essence réside dans le fait qu'à chaque
URL demandée correspond un certain
dossier à l'intérieur de src/app.
De plus, à l'intérieur du dossier doit se trouver
un fichier nommé page.jsx.
C'est précisément ce fichier qui sera renvoyé
au navigateur. De plus, dans ce fichier, nous
écrirons du code en JSX, et c'est le
code HTML prêt de la page qui sera envoyé au navigateur.
Regardons un exemple.
Supposons que nous voulions que l'URL /test/
renvoie un certain texte.
Créons le dossier correspondant : src/app/test.
À l'intérieur de ce dossier, créons un fichier page.jsx
avec le contenu suivant :
export default function Test() {
return <h1>hello, user!</h1>;
}
Ouvrez dans votre navigateur notre URL : /test. Et vous verrez le texte que nous avons écrit à l'intérieur du fichier JSX.
Essayez de changer le texte et sauvegardez le fichier. Après cela, le texte changera automatiquement dans le navigateur. C'est ainsi que fonctionne NextJS en mode développement.
Faites en sorte que lors de l'accès à l'adresse
/about, le navigateur affiche
un message avec votre prénom et
nom de famille.
