Next.js ile İnteraktif Portföy Haritası Oluşturma ve Google Cloud Run’a Dağıtma
Günümüz dijital dünyasında, projelerinizi ve deneyimlerinizi sergilemenin yaratıcı yollarını bulmak büyük önem taşır. Geleneksel özgeçmişler veya statik portföy siteleri yerine, interaktif bir portföy haritası, çalışmalarınızı coğrafi bağlamda sunarak ziyaretçilerinize benzersiz ve akılda kalıcı bir deneyim sunabilir. Bu makalede, modern web geliştirme teknolojileri olan Next.js ile böyle bir haritayı nasıl oluşturacağınızı ve Google Cloud Run’ın sunucusuz mimarisi üzerinde nasıl güvenilir ve ölçeklenebilir bir şekilde dağıtacağınızı adım adım inceleyeceğiz.
Giriş: Neden İnteraktif Bir Portföy Haritası?
Kariyeriniz boyunca farklı şehirlerde veya ülkelerde gerçekleştirdiğiniz projeleri, katıldığınız etkinlikleri veya edindiğiniz deneyimleri görsel ve etkileşimli bir harita üzerinde sergilemek, potansiyel işverenlere, müşterilere veya işbirlikçilere kendinizi çok daha etkili bir şekilde tanıtmanızı sağlar. Bu yaklaşım, sadece teknik becerilerinizi değil, aynı zamanda yaratıcılığınızı ve hikaye anlatma yeteneğinizi de ortaya koyar.
Geleneksel Portföylerin Sınırları
Geleneksel portföyler genellikle kronolojik listeler veya statik proje sayfalarından oluşur. Bu yapılar, içeriği düzenli bir şekilde sunsa da, projeler arasındaki coğrafi bağlantıları veya global deneyimleri görselleştirmede yetersiz kalır. Okuyucunun dikkatini çekmek ve akılda kalıcı bir izlenim bırakmak genellikle zordur.
İnteraktif Haritanın Avantajları
İnteraktif bir portföy haritası, projelerinizi dünya haritası üzerinde işaretleyerek ziyaretçilere keşfedilebilir bir deneyim sunar. Kullanıcılar, ilgilendikleri bölgelere yakınlaşabilir, işaretçilere tıklayarak projelerin detaylarına ulaşabilir ve sizin global ayak izinizin bir parçası olabilirler. Bu, hem görsel açıdan zengin hem de kullanıcı deneyimi açısından tatmin edici bir yaklaşımdır.
Teknolojik Seçimlerimiz: Next.js ve Harita Kütüphaneleri
Bu projede, React tabanlı, sunucu tarafı render (SSR) ve statik site oluşturma (SSG) yetenekleriyle öne çıkan Next.js framework’ünü kullanacağız. Next.js, performans, SEO ve geliştirici deneyimi açısından modern web uygulamaları için ideal bir seçimdir. Harita entegrasyonu için ise React ekosistemiyle uyumlu, popüler bir harita kütüphanesi olan React-Leaflet’i tercih edeceğiz. Dağıtım için ise sunucusuz mimarisiyle öne çıkan, maliyet etkin ve kolay yönetilebilir Google Cloud Run’ı kullanacağız.
Next.js ile Proje Kurulumu ve Temel Yapılandırma
Projemize başlamadan önce, gerekli araçların (Node.js ve npm/yarn) sisteminizde kurulu olduğundan emin olun. Ardından, Next.js uygulamasını oluşturmak için terminalimizi kullanacağız.
Yeni Bir Next.js Uygulaması Başlatma
Yeni bir Next.js projesi oluşturmak için aşağıdaki komutu çalıştırın:
npx create-next-app my-portfolio-map --ts
cd my-portfolio-map
Bu komut, TypeScript destekli yeni bir Next.js projesi oluşturacak ve gerekli bağımlılıkları kuracaktır.
Gerekli Bağımlılıkları Kurma
İnteraktif harita için React-Leaflet ve Leaflet kütüphanelerini kurmamız gerekiyor. Leaflet, harita motorunu sağlarken, React-Leaflet bu motoru React bileşenleri aracılığıyla kullanmamızı sağlar.
npm install leaflet react-leaflet
npm install --save-dev @types/leaflet
Ayrıca, Leaflet'in stil dosyalarını da projemize dahil etmemiz gerekecek. Bunu genellikle _app.tsx dosyasında veya harita bileşeninin kendisinde yapabiliriz.
Proje Klasör Yapısı ve Temel Bileşenler
Next.js'in tipik klasör yapısı şöyledir:
pages/: Uygulamanızın rotalarını tanımlayan React bileşenleri.components/: Tekrar kullanılabilir UI bileşenleri.public/: Statik dosyalar (resimler, fontlar vb.).styles/: Global veya modül bazlı CSS dosyaları.
Harita bileşenimiz için components/Map.tsx gibi bir dosya oluşturacağız. Portföy verilerimizi ise data/portfolio-data.json gibi bir dosyada tutabiliriz.
İnteraktif Harita Bileşenini Oluşturma
Şimdi projemizin kalbi olan harita bileşenini oluşturmaya geçelim. Next.js'te harita kütüphaneleri genellikle istemci tarafında (client-side) render edilmesi gerektiği için dinamik import kullanmak önemlidir.
Harita Kütüphanesini Entegre Etme (React-Leaflet)
components/Map.tsx dosyasında temel bir harita bileşeni oluşturalım. Leaflet'in CSS dosyasını da import etmeyi unutmayın.
// components/Map.tsx
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet'; // Leaflet'in varsayılan ikonlarını düzeltmek için
// Leaflet'in varsayılan ikonlarının bozuk görünmesini engellemek için geçici çözüm
delete L.Icon.Default.prototype._get='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Google_Cloud_Run_logo.svg/1200px-Google_Cloud_Run_logo.svg.png';
L.Icon.Default.mergeOptions({
iconRetinaUrl: 'leaflet/images/marker-icon-2x.png',
iconUrl: 'leaflet/images/marker-icon.png',
shadowUrl: 'leaflet/images/marker-shadow.png',
});
interface PortfolioItem {
id: string;
name: string;
description: string;
position: [number, number]; // [latitude, longitude]
link?: string;
}
interface MapProps {
items: PortfolioItem[];
}
const Map = ({ items }: MapProps) => {
const defaultPosition: [number, number] = [39.9334, 32.8597]; // Ankara
const defaultZoom = 6;
return (
{items.map(item => (
))}
);
};
export default Map;
Bu bileşeni pages/index.tsx dosyasında dinamik olarak import etmeliyiz:
// pages/index.tsx
import dynamic from 'next/dynamic';
import Head from 'next/head';
import { useState, useEffect } from 'react';
// Dinamik import ile harita bileşenini sadece istemci tarafında render et
const DynamicMap = dynamic(() => import('../components/Map'), {
ssr: false, // Sunucu tarafında render etme
});
interface PortfolioItem {
id: string;
name: string;
description: string;
position: [number, number]; // [latitude, longitude]
link?: string;
}
const Home = () => {
const [portfolioItems, setPortfolioItems] = useState([]);
useEffect(() => {
// Örnek portföy verileri (gerçek uygulamada bir API'den gelebilir)
const data: PortfolioItem[] = [
{ id: '1', name: 'Proje A', description: 'Web sitesi geliştirme.', position: [41.0082, 28.9784], link: 'https://example.com/proje-a' }, // İstanbul
{ id: '2', name: 'Proje B', description: 'Mobil uygulama tasarımı.', position: [38.4237, 27.1428], link: 'https://example.com/proje-b' }, // İzmir
{ id: '3', name: 'Proje C', description: 'Veri analizi çalışması.', position: [36.8969, 30.7133] }, // Antalya
];
setPortfolioItems(data);
}, []);
return (
Portföy Haritam
İnteraktif Portföy Haritası
);
};
export default Home;
Yukarıdaki kodda, ssr: false ayarı ile harita bileşeninin sadece tarayıcıda çalışmasını sağlıyoruz. Ayrıca, Leaflet'in varsayılan ikonlarının Next.js ile doğru yüklenmemesi sorununu gidermek için küçük bir geçici çözüm ekledik.
Harita Katmanları ve İşaretçiler (Markers) Ekleme
TileLayer bileşeni, haritanın arka planını oluşturan döşeme katmanlarını tanımlar. OpenStreetMap'in ücretsiz döşeme sunucusunu kullandık. Marker bileşeni ise harita üzerindeki belirli bir konumu işaretler. Her işaretçiye bir Popup ekleyerek, tıklandığında projenin adını, açıklamasını ve isteğe bağlı bir bağlantıyı gösterebiliriz.
Harita Üzerinde Veri Görselleştirme ve Etkileşim
portfolioItems dizisindeki her bir öğe için bir Marker oluşturarak, portföy verilerimizi harita üzerinde görselleştiriyoruz. Kullanıcılar işaretçilere tıklayarak ilgili projenin detaylarını içeren bir açılır pencere (popup) görebilirler. Bu, portföyünüzle interaktif bir deneyim sağlar.
Portföy Verilerini Yönetme ve Görüntüleme
Portföy verilerinizin yönetimi, uygulamanızın esnekliği ve güncellenebilirliği için kritik öneme sahiptir.
Veri Kaynağı Seçimi (JSON, API, CMS)
Küçük bir portföy için statik bir JSON dosyası yeterli olabilir. Ancak, daha büyük veya sık güncellenen portföyler için bir API veya headless CMS (Content Management System) kullanmak daha uygun olacaktır. Örnek kodumuzda basit bir JSON dizisi kullandık, ancak bu veri bir Next.js API rotasından veya harici bir servisten de çekilebilir.
// data/portfolio-data.json (Örnek)
[
{
"id": "1",
"name": "E-ticaret Platformu Geliştirme",
"description": "Kapsamlı bir e-ticaret çözümü için tam yığın geliştirme.",
"position": [41.0082, 28.9784],
"link": "https://example.com/ecommerce-project"
},
{
"id": "2",
"name": "Mobil Uygulama UI/UX Tasarımı",
"description": "Yenilikçi bir mobil uygulama için kullanıcı arayüzü ve deneyim tasarımı.",
"position": [38.4237, 27.1428]
},
{
"id": "3",
"name": "Büyük Veri Analizi Projesi",
"description": "Finans sektöründe büyük veri setlerinin analizi ve raporlama.",
"position": [34.0522, -118.2437],
"link": "https://example.com/big-data-project"
}
]
Harita Verilerini Dinamik Olarak Yükleme
Verileri useEffect hook'u içinde fetch edebilir ve useState ile yönetebiliriz. Gerçek bir uygulamada, bu verileri getStaticProps veya getServerSideProps kullanarak Next.js'in veri getirme mekanizmalarıyla sunucu tarafında da önceden yükleyebilirsiniz, ancak harita bileşeni istemci tarafında render edildiği için, verinin de istemci tarafında hazır olması yeterlidir.
İşaretçi Tıklama Olayları ve Detay Görüntüleme
Popup bileşeni, işaretçiye tıklandığında otomatik olarak açılır. İçine HTML içeriği yerleştirebilirsiniz. Daha karmaşık etkileşimler için, Marker bileşenine onClick olay dinleyicisi ekleyerek, tıklandığında bir modal pencere açabilir veya kullanıcıyı başka bir detay sayfasına yönlendirebilirsiniz.
Google Cloud Run'a Dağıtım İçin Hazırlık
Uygulamamızı Next.js ile geliştirdik, şimdi sıra onu dünyaya açmaya geldi. Google Cloud Run, sunucusuz bir platform olup, konteynerleştirilmiş uygulamaları otomatik olarak ölçeklendirir ve yönetir. Bu, geliştiricilerin altyapı yerine kod yazmaya odaklanmasını sağlar.
Docker Nedir ve Neden Kullanılır?
Docker, uygulamaları ve bağımlılıklarını izole edilmiş bir ortamda, yani "konteyner" içinde paketlemeye yarayan bir platformdur. Bu sayede uygulamanızın her ortamda (geliştirme, test, üretim) tutarlı bir şekilde çalışmasını garanti edersiniz. Cloud Run, dağıtım için Docker konteynerlerini kullanır.
Dockerfile Oluşturma (Next.js Uygulaması İçin)
Projenizin kök dizininde Dockerfile adında bir dosya oluşturun ve içine aşağıdaki içeriği ekleyin:
# Temel imaj olarak Node.js 18 kullan
FROM node:18-alpine AS builder
# Çalışma dizinini ayarla
WORKDIR /app
# Bağımlılıkları kopyala ve kur
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
# Uygulama kaynak kodunu kopyala
COPY . .
# Next.js uygulamasını derle
RUN yarn build
# Üretim imajı için daha küçük bir temel imaj kullan
FROM node:18-alpine AS runner
WORKDIR /app
# Next.js statik dosyalarını ve build çıktısını kopyala
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json
# Uygulamanın çalışacağı portu ayarla (Cloud Run için gerekli)
ENV PORT 8080
EXPOSE 8080
# Uygulamayı başlat
CMD ["yarn", "start"]
Bu Dockerfile, çok aşamalı bir derleme (multi-stage build) kullanır. İlk aşamada (builder), uygulamanın bağımlılıkları kurulur ve Next.js uygulaması derlenir. İkinci aşamada (runner), sadece uygulamanın çalışması için gerekli olan dosyalar kopyalanır, bu da nihai Docker imajının boyutunu küçültür. PORT ortam değişkeni Cloud Run için önemlidir.
Google Cloud Projesi ve Gerekli API'leri Etkinleştirme
- Google Cloud Console'a gidin ve yeni bir proje oluşturun veya mevcut bir projeyi seçin.
- Projeniz için faturalandırmayı etkinleştirin (Cloud Run'ın ücretsiz katmanı olsa da, faturalandırma hesabı gereklidir).
- "Cloud Build API" ve "Cloud Run API" hizmetlerini etkinleştirin. Bu API'ler, Docker imajınızı oluşturmak ve Cloud Run'a dağıtmak için gereklidir.
Google Cloud Run Üzerine Dağıtım
Uygulamamızın Docker imajını oluşturup Google Container Registry'ye (GCR) yükledikten sonra, onu Cloud Run'a dağıtabiliriz.
Google Cloud SDK Kurulumu ve Kimlik Doğrulama
Google Cloud SDK'yı bilgisayarınıza kurmanız gerekmektedir. Kurulum talimatları için Google Cloud belgelerine bakabilirsiniz. Kurulumdan sonra terminalde kimlik doğrulaması yapın:
gcloud auth login
gcloud config set project YOUR_PROJECT_ID
YOUR_PROJECT_ID yerine kendi Google Cloud proje ID'nizi yazın.
Docker İmajını Oluşturma ve Google Container Registry'ye Yükleme
Projenizin kök dizininde aşağıdaki komutu çalıştırarak Docker imajınızı oluşturun ve GCR'ye yükleyin. Bu işlem Cloud Build tarafından yönetilir:
gcloud builds submit --tag gcr.io/YOUR_PROJECT_ID/my-portfolio-map
Bu komut, Dockerfile'ınızı kullanarak bir Docker imajı oluşturacak, etiketleyecek ve Google Container Registry'ye (GCR) yükleyecektir. İmaj adı gcr.io/YOUR_PROJECT_ID/my-portfolio-map şeklinde olacaktır.
Cloud Run Servisini Dağıtma ve Yapılandırma
İmajınız GCR'ye yüklendikten sonra, onu Cloud Run'a dağıtabilirsiniz:
gcloud run deploy my-portfolio-map \
--image gcr.io/YOUR_PROJECT_ID/my-portfolio-map \
--platform managed \
--region us-central1 \
--allow-unauthenticated \
--port 8080
my-portfolio-map: Cloud Run servisinizin adıdır.--image: GCR'deki Docker imajınızın yoludur.--platform managed: Cloud Run'ın tam olarak yönetilen ortamını kullanır.--region us-central1: Servisinizi dağıtmak istediğiniz bölgedir (size en yakın olanı seçebilirsiniz).--allow-unauthenticated: Servisinize herkese açık erişime izin verir (portföy haritası için gereklidir).--port 8080: Uygulamanızın içinde dinlediği porttur (Dockerfile'da belirttiğimizENV PORT 8080ile eşleşmelidir).
Dağıtım tamamlandığında, terminalde servisinizin URL'sini göreceksiniz. Bu URL'yi kullanarak interaktif portföy haritanıza erişebilirsiniz. Cloud Run, gelen isteklere göre uygulamanızı otomatik olarak ölçeklendirecek ve siz sadece kullanılan kaynaklar için ödeme yapacaksınız.
Sonuç ve Gelecek Adımlar
Bu makalede, Next.js, React-Leaflet ve Google Cloud Run kullanarak nasıl interaktif bir portföy haritası oluşturacağınızı ve dağıtacağınızı öğrendiniz. Bu proje, sadece teknik becerilerinizi sergilemekle kalmayıp, aynı zamanda yaratıcı ve etkileşimli bir deneyim sunarak izleyicilerinizin dikkatini çekmenizi sağlayacaktır.
Özet ve Elde Edilenler
Next.js'in modern web geliştirme yeteneklerinden faydalanarak hızlı ve SEO dostu bir uygulama oluşturduk. React-Leaflet ile kolayca interaktif harita entegrasyonu sağladık ve projelerimizi coğrafi olarak görselleştirdik. Son olarak, Docker ve Google Cloud Run sayesinde uygulamamızı kolayca konteynerize edip sunucusuz bir ortamda ölçeklenebilir ve maliyet etkin bir şekilde dağıttık.
Performans Optimizasyonu ve Güvenlik İpuçları
- Harita Verilerini Optimize Edin: Büyük veri setleri için, sadece görünür alandaki işaretçileri yüklemek veya kümeleme (clustering) teknikleri kullanmak performansı artırabilir.
- Resimleri Optimize Edin: Portföy detaylarında kullanacağınız görselleri WebP gibi modern formatlarda ve optimize edilmiş boyutlarda sunun.
- Güvenlik Başlıkları: Next.js'in güvenlik başlıklarını (CSP, HSTS) yapılandırarak uygulamanızın güvenliğini artırın.
- Ortam Değişkenleri: Hassas bilgileri (API anahtarları vb.) doğrudan koda gömmek yerine, Google Cloud Secret Manager gibi hizmetler aracılığıyla ortam değişkenleri olarak yönetin.
Geliştirme İçin Ek Fikirler
- Filtreleme ve Arama: Harita üzerindeki projeleri kategoriye, tarihe veya anahtar kelimeye göre filtreleme ve arama özellikleri ekleyin.
- Kullanıcı Kimlik Doğrulaması: Eğer haritanızda kişiselleştirilmiş içerikler sunacaksanız, Firebase Authentication gibi servislerle kullanıcı kimlik doğrulaması ekleyebilirsiniz.
- Daha Zengin Harita Katmanları: Mapbox veya Google Maps gibi daha gelişmiş harita servislerini entegre ederek özel harita stilleri ve daha zengin özellikler sunabilirsiniz.
- CI/CD Boru Hattı: Cloud Build veya GitHub Actions gibi araçlarla otomatik dağıtım (CI/CD) boru hattı kurarak kod değişikliklerinizin otomatik olarak Cloud Run'a dağıtılmasını sağlayın.
Sıkça Sorulan Sorular (SSS)
Next.js yerine başka bir framework kullanabilir miyim?
Evet, React, Vue.js veya Angular gibi diğer modern JavaScript framework'lerini de kullanabilirsiniz. Ancak Next.js, SSR ve SSG yetenekleriyle performans ve SEO avantajları sunar. Dağıtım süreci (Docker ve Cloud Run) çoğu framework için benzer olacaktır.
Hangi harita kütüphanesini seçmeliyim?
Bu makalede React-Leaflet'i kullandık çünkü hafif, açık kaynaklı ve React ile iyi entegre olur. Alternatif olarak, daha fazla özellik ve özelleştirme seçeneği sunan Mapbox GL JS (react-map-gl ile) veya Google Maps API (react-google-maps ile) gibi kütüphaneleri de değerlendirebilirsiniz. Seçiminiz projenizin gereksinimlerine ve bütçenize bağlıdır.
Google Cloud Run'ın maliyeti ne kadar?
Google Cloud Run, cömert bir ücretsiz katman sunar. Bu katman, ayda belirli bir miktarda CPU süresi, bellek ve istek sayısını kapsar. Küçük ve orta ölçekli portföy haritaları için bu ücretsiz katman genellikle yeterli olacaktır. Kullanımınız ücretsiz katmanı aşarsa, sadece kullandığınız kaynaklar için ödeme yaparsınız. Fiyatlandırma detayları için Google Cloud Run fiyatlandırma sayfasını kontrol edebilirsiniz.
Verilerimi nasıl güncel tutabilirim?
Verileriniz statik bir JSON dosyasındaysa, dosyayı güncelleyip uygulamayı yeniden dağıtmanız gerekir. Eğer bir API veya headless CMS kullanıyorsanız, CMS arayüzünden verileri güncelleyebilir ve uygulamanızın API'yi yeniden çağırmasını sağlayarak otomatik olarak yeni verileri göstermesini sağlayabilirsiniz. Bir CI/CD boru hattı kurarak, kod veya veri değişikliklerinin otomatik olarak yeni bir dağıtıma yol açmasını sağlayabilirsiniz.