Next.js - Static File Serving

In Next.js können wir statische Seiten wie Bilder sehr einfach bereitstellen, indem wir sie einfügen public, ein Verzeichnis der obersten Ebene. Wir können diese Dateien auf ähnliche Weise wie Seiten in verweisenpages Verzeichnis.

In Next.js ist eine Seite eine Reaktionskomponente und wird aus dem Seitenverzeichnis exportiert. Jede Seite ist anhand ihres Dateinamens einer Route zugeordnet.

Lassen Sie uns das im Kapitel " Seiten " verwendete nextjs-Projekt aktualisieren .

Erstellen Sie ein öffentliches Verzeichnis und platzieren Sie alle Bilder darin. Wir haben logo.png, TutorialsPoint Logo Bild genommen.

Aktualisieren Sie first.js wie folgt:

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

Hier haben wir einen Verweis auf logo.png in der Datei index.js hinzugefügt.

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

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

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

Das öffentliche Verzeichnis ist auch für SEO-Zwecke nützlich. Es kann für robot.txt, die Überprüfung der Google Site oder andere statische Elemente in der Webanwendung verwendet werden.