Pages dans Next.js

Dans Next.js, une page est un composant React exporté depuis un fichier dans le répertoire pages.

Les pages sont associées à une route en fonction de leur nom de fichier. Par exemple, en développement :

• pages/index.js est associé à la route /.
• pages/posts/first-post.js est associé à la route /posts/first-post.

Nous avons déjà le fichier pages/index.js, alors créons pages/posts/first-post.js pour voir comment cela fonctionne.

Créer une nouvelle page

Créez le répertoire posts sous pages.

Créez un fichier appelé first-post.js dans le répertoire posts avec le contenu suivant :

export default function FirstPost() {
  return <h1>First Post</h1>;
}

Le composant peut avoir n'importe quel nom, mais vous devez l'exporter en tant qu'export default.

Maintenant, assurez-vous que le serveur de développement est en cours d'exécution et visitez http://localhost:3000/posts/first-post. Vous devriez voir la page :

C'est ainsi que vous pouvez créer différentes pages dans Next.js.

Il suffit de créer un fichier JS sous le répertoire pages, et le chemin du fichier devient le chemin de l'URL.

D'une certaine manière, cela ressemble à la construction de sites web avec des fichiers HTML ou PHP. Au lieu d'écrire du HTML, vous écrivez du JSX et utilisez des composants React.

Ajoutons un lien vers la nouvelle page afin de pouvoir y naviguer depuis la page d'accueil.