Next.js 15 Sıfırdan Başlangıç

Neden next/image?

Normal HTML <img> etiketi kullanmak, büyük dosyalar ve CLS (Cumulative Layout Shift) gibi Core Web Vitals sorunlarına yol açar. next/image bunları otomatik çözer:

• ✅ Otomatik WebP/AVIF dönüşümü — boyutu %30-50 küçültür
• ✅ Lazy loading — ekranda görünene kadar yüklenmez
• ✅ CLS önleme — boyutlar önceden ayrılır
• ✅ Responsive — farklı ekran boyutlarına uygun sürümler üretir

Yerel Görseller

import Image from "next/image";
import profilFoto from "@/public/profil.jpg"; // import ile otomatik boyut

export default function Profil() {
  return (
    <Image
      src={profilFoto}
      alt="Profil fotoğrafım"
      // width ve height otomatik alınır
    />
  );
}

Uzak Görseller

// next.config.ts — önce izin vermelisiniz
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },
};

// Bileşende kullanım
<Image
  src="https://images.unsplash.com/photo-xxx"
  alt="Açıklama"
  width={800}
  height={600}
/>

fill Özelliği

Üst elementin boyutunu doldurmak için:

<div className="relative h-64 w-full">
  <Image
    src="/hero.jpg"
    alt="Hero görsel"
    fill
    className="object-cover"
    priority  // İlk ekranda görünüyorsa mutlaka ekleyin (LCP)
  />
</div>

priority Özelliği