Next.js - Statik Dosya Sunumu

Next.js'de, resimler gibi statik sayfaları, onları yerleştirerek çok kolay bir şekilde sunabiliriz. public, üst düzey bir dizin. Bu dosyalara, şu sayfalardaki gibi benzer şekilde başvurabiliriz:pages dizin.

Next.js'de, bir sayfa bir React Bileşenidir ve sayfalar dizininden dışa aktarılır. Her sayfa, dosya adına göre bir yol ile ilişkilendirilir.

Sayfalar bölümünde kullanılan nextjs projesini güncelleyelim .

Genel dizin oluşturun ve içine herhangi bir resim yerleştirin. Logo.png, TutorialsPoint Logo resmini aldık.

First.js'yi aşağıdaki gibi güncelleyin -

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

Burada index.js dosyasında logo.png'ye bir referans ekledik.

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve aşağıdaki çıktıyı göreceksiniz.

Genel dizin, SEO amaçlı olması durumunda da yararlıdır. Robot.txt, Google Site doğrulaması veya web uygulamasındaki diğer statik varlıklar için kullanılabilir.