📌 Next.js – Fonksiyonalite

Next.js App Router, Server/Client Component ayrımı, dinamik routing, veri çekme ve optimizasyonlarıyla modern React geliştirmede güçlü bir altyapı sağlar.

1️⃣ Server vs Client Tarafında Konsol

• Server Component içinde console.log() yazarsanız server loglarına düşer, tarayıcı konsolunda görünmez.
• Client Component’lerde console.log() tarayıcı konsoluna yazılır.

// server component
export default async function Page() {
  console.log("Bu server konsolu");
  return <div>Hello</div>;
}

2️⃣ Private Dosyalar

• App klasöründeki dosya veya klasör isimlerinin başına _ eklenirse private olur: route oluşturulmaz, dışardan erişilemez.

_app/
├── _secret.tsx  <- route oluşturulmaz

3️⃣ Image Optimizasyonu – next/image

• Next.js Image etiketi ile lazy load, responsive, optimized görseller sağlar.
• fill prop’u ile kapsayıcıyı tamamen doldurur.

import Image from "next/image";
<Image src={bg} fill alt="Mountains" className="object-cover" />;

💡 İpucu: Veritabanından gelen resimler için bile fill ve object-cover kullanmak görselin düzgün yerleşmesini sağlar.

4️⃣ Environment Variables

• .env dosyasında NEXT_PUBLIC_ ile başlayan değişkenler client tarafında erişilebilir.