Next.js - Penyajian File Statis

Di Next.js, kita dapat menyajikan halaman statis seperti gambar dengan sangat mudah dengan memasukkannya public, direktori tingkat atas. Kita dapat merujuk file-file ini dengan cara yang sama seperti halaman dipages direktori.

Di Next.js, halaman adalah Komponen React dan diekspor dari direktori halaman. Setiap halaman dikaitkan dengan rute berdasarkan nama filenya.

Mari perbarui proyek nextjs yang digunakan dalam bab Pages .

Buat direktori publik dan letakkan gambar apa pun di dalamnya. Kami telah mengambil logoo.png, gambar Logo TutorialsPoint.

Perbarui first.js sebagai berikut -

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

Di sini kami telah menambahkan referensi ke logo.png di file index.js.

Mulai Server Next.js

Jalankan perintah berikut untuk memulai 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

Verifikasi Output

Buka localhost: 3000 di browser dan Anda akan melihat output berikut.

direktori publik juga berguna dalam hal tujuan SEO. Ini dapat digunakan untuk robot.txt, verifikasi Situs Google atau aset statis lainnya di aplikasi web.