Next.js'de Dinamik Resim Erişimi: Deploy Sonrası Sorunu Çözmek

nextjsdeploydinamik resimAPI endpointweb geliştirmenodejs

Next.js'de deploy sonrasında dinamik olarak yüklenen resimlere erişim sağlama sorununu API endpoint kullanarak nasıl çözebileceğinizi öğrenin.

Next.js Deploy Sonrası Dinamik Olarak Kaydedilen Resimlere Erişim Sorunu ve Çözümü

Next.js uygulamaları geliştirirken dinamik olarak yüklenen resim ve dosyaları depolamak, özellikle deploy (yayın) sonrası bazı zorluklarla karşılaşabilir. Bu yazıda, Next.js ile /uploads gibi bir klasöre dinamik olarak dosya kaydetmenin, ardından bu dosyalara deploy sonrasında nasıl erişebileceğimizi ve bu sorunun nasıl çözülebileceğini anlatacağım.

Problemin Tanımı

Next.js, bir static site generator olarak çalışırken, projedeki mevcut dosya ve resimlerin yollarını build (derleme) aşamasında belirler. Yani, build aşamasında /uploads klasöründe hangi resimler ya da dosyalar varsa, bunların yollarını Next.js statik olarak biliyor. Ancak deploy işleminden sonra yeni bir resim veya dosya yüklediğimizde, Next.js bu dosyaları tanımıyor ve doğrudan bu dosyalara erişim sağlayamıyoruz. Bunun sebebi, build sırasında belirlenen dosya yollarının sonradan yüklenen dosyaları kapsamamasıdır.

Bu durumda /uploads klasörüne kaydettiğimiz resimlere ya da dosyalara doğrudan erişim sağlamak yerine, dinamik bir çözüm kullanmamız gerekiyor. Bu yazıda bu problemi nasıl çözebileceğimizi göstereceğim.

Çözüm: API Endpoint Kullanarak Resimlere Erişim

Bu sorunu çözmenin bir yolu, dinamik olarak yüklenen resimlere bir API endpoint üzerinden erişmektir. Bu sayede, /uploads klasörüne yüklediğimiz resimlere deploy sonrasında da erişebilir ve bu dosyaları kullanabiliriz.

Aşağıda, "getImage" adında bir API endpoint tanımlayarak bu sorunu nasıl çözdüğümüzü görebilirsiniz:

import fs from "fs";
import path from "path";
import { NextResponse } from "next/server";

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const fileName = searchParams.get("fileName");

  if (!fileName) {
    return NextResponse.json(
      { message: "Geçersiz istek, fileName parametresi eksik." },
      { status: 400 },
    );
  }

  const filePath = path.join(process.cwd(), fileName);

  if (fs.existsSync(filePath)) {
    const fileStream = fs.createReadStream(filePath);
    return new Response(fileStream, {
      headers: { "Content-Type": "image/jpeg" },
    });
  } else {
    return NextResponse.json({ message: "Resim bulunamadı" }, { status: 404 });
  }
}

Bu kod, GET HTTP metodunu kullanarak dinamik bir şekilde resim dosyasına erişen bir endpoint tanımlar.

Şimdi bu kodun detaylarına bakalım:

  • fileName parametresi URL'den alınır. Bu parametre ile hangi dosyaya erişmek istediğimizi belirliyoruz.
  • filePath ile dosyanın yolunu belirliyoruz. Bu işlem için process.cwd() kullanıyoruz ki bu, projenin ana dizinini temsil eder.
  • Eğer belirtilen dosya mevcutsa (fs.existsSync(filePath)), dosyayı stream olarak dönüyoruz ve bu sayede resim dosyasına dinamik bir şekilde erişmiş oluyoruz. Eğer dosya mevcut değilse, "Resim bulunamadı" şeklinde bir hata mesajı dönüyoruz.

Resimlerin Kullanımı

Bu endpoint ile, dinamik olarak yüklenen resimlere deploy sonrasında da erişebiliriz. Aşağıda, bu endpoint'i kullanarak bir Image bileşeni ile resimlerin nasıl gösterileceği örneklendirilmiştir:

<Imagekey={index}width={100}src={`/api/getImage?fileName=${url}`}
  alt={`Image ${index + 1}`}
  fallback="/nullimg.png"style={{ marginRight: "10px" }}
/>

Burada, /api/getImage endpoint'ine fileName parametresi gönderilerek ilgili resim dosyasına dinamik olarak erişiliyor. Eğer belirtilen dosya bulunamazsa, fallback özelliği ile varsayılan bir resim gösteriliyor.

Neden Bu Yöntem?

  • Dinamik Erişim: Deploy sonrasında yüklenen dosyalara API endpoint ile erişmek, build aşamasında sabitlenmiş yolları kullanmaktan çok daha dinamik bir yaklaşımdır. Böylece sonradan yüklenen resimlere erişimde herhangi bir sıkıntı yaşamazsınız.
  • Güvenlik: API üzerinden dosyalara erişim sağlamak, doğrudan dosya sistemine erişmekten daha güvenli olabilir. İstemci tarafında hangi dosyaların var olduğunu gizleyebilir ve sadece izin verilen dosyalara erişim izni verebilirsiniz.

Sonuç

Next.js uygulamalarında, dinamik olarak yüklenen resimlerin deploy sonrasında erişilebilir olması için bir API endpoint kullanmak oldukça etkili bir yöntemdir. Yukarıdaki "getImage" örneği, bu tür bir çözümün nasıl uygulanabileceğini gösteriyor. Bu sayede, uygulamanıza eklenen dosyalara dinamik ve güvenli bir şekilde erişebilir, kullanıcılarınıza sorunsuz bir deneyim sunabilirsiniz.

Umarım bu yazı, benzer problemler yaşayan geliştiricilere yardımcı olur. Bu yöntemle ilgili sorularınız ya da farklı çözüm önerileriniz varsa yorumlar kısmında paylaşabilirsiniz!

Blog