Next.js - Service de fichiers statiques

Dans Next.js, nous pouvons servir des pages statiques comme des images très facilement en les plaçant dans public, un répertoire de premier niveau. Nous pouvons référencer ces fichiers de la même manière que les pages danspages annuaire.

Dans Next.js, une page est un composant React et est exportée à partir du répertoire de pages. Chaque page est associée à une route en fonction de son nom de fichier.

Mettons à jour le projet nextjs utilisé dans le chapitre Pages .

Créez un répertoire public et placez-y toutes les images. Nous avons pris logo.png, l'image du logo TutorialsPoint.

Mettez à jour first.js comme suit -

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
         <br/">
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	  
   )
}

Ici, nous avons ajouté une référence à logo.png dans le fichier index.js.

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.

l'annuaire public est également utile en cas de référencement. Il peut être utilisé pour robot.txt, la vérification du site Google ou tout autre élément statique de l'application Web.