Next.js - Pubblicazione di file statici

In Next.js, possiamo servire pagine statiche come immagini molto facilmente inserendole public, una directory di primo livello. Possiamo fare riferimento a questi file in modo simile come le pagine inpages directory.

In Next.js, una pagina è un componente React e viene esportata dalla directory delle pagine. Ogni pagina è associata a un percorso in base al nome del file.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Pages .

Crea una directory pubblica e inserisci le immagini al suo interno. Abbiamo preso logo.png, l'immagine del logo TutorialsPoint.

Aggiorna first.js come segue:

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" />
      </>	  
   )
}

Qui abbiamo aggiunto un riferimento a logo.png nel file index.js.

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vedrai il seguente output.

public directory è utile anche in caso di finalità SEO. Può essere utilizzato per robot.txt, verifica di Google Site o qualsiasi altra risorsa statica nell'applicazione web.