M

MLOG

Türkçe

Next.js Edge Config'i keşfedin: yapılandırmayı küresel olarak hız ve verimlilikle dağıtan güçlü bir çözüm. Edge'de dinamik yapılandırma ile uygulamanızı nasıl optimize edeceğinizi öğrenin.

Next.js Edge Config: Küresel Yapılandırma Dağıtımı Artık Çok Kolay

Günümüzün hızlı tempolu web geliştirme dünyasında, dünya çapındaki kullanıcılara kişiselleştirilmiş ve dinamik deneyimler sunmak çok önemlidir. Popüler bir React framework'ü olan Next.js, performanslı ve ölçeklenebilir web uygulamaları oluşturmak için sağlam bir çözüm sunar. Temel özelliklerinden biri, yapılandırmayı küresel olarak edge'de yönetmek ve dağıtmak için güçlü bir araç olan Edge Config'dir. Bu blog yazısı, uygulamanızın performansını optimize etmek ve küresel kitlenize özel deneyimler sunmak için Next.js Edge Config'i anlama ve kullanma konusunda kapsamlı bir rehber sunmaktadır.

Next.js Edge Config Nedir?

Next.js Edge Config, özellikle Next.js Edge Fonksiyonlarına yapılandırma verileri sunmak için tasarlanmış, küresel olarak dağıtılmış, düşük gecikmeli bir anahtar-değer (key-value) deposudur. Geleneksel veritabanları veya API'lerin aksine, Edge Config hız ve verimlilik için optimize edilmiştir ve dünyanın her yerinden yapılandırma verilerine milisaniyeler içinde erişmenizi sağlar. Bu, performanstan ödün vermeden uygulamanızın davranışını yapılandırma değerlerine göre dinamik olarak ayarlamanıza olanak tanır.

Bunu, Edge Fonksiyonlarından inanılmaz bir hızla sorgulayabileceğiniz, küresel olarak çoğaltılmış bir JSON dosyası gibi düşünebilirsiniz. Bu, onu aşağıdakiler için ideal hale getirir:

Neden Edge Config Kullanmalısınız?

Next.js Edge Config kullanmanın temel faydaları şunlardır:

Edge Config'e Nasıl Başlanır?

Next.js Edge Config'e başlamak için adım adım bir rehber:

1. Proje Kurulumu

Bir Next.js projeniz olduğundan emin olun. Yoksa, şunu kullanarak bir tane oluşturun:

npx create-next-app@latest my-app
cd my-app

2. Bir Edge Config Oluşturun

Edge Config'i kullanmak için bir Vercel hesabına ihtiyacınız olacak. Giriş yaptıktan sonra Vercel projenize gidin ve yeni bir Edge Config oluşturun. Ona açıklayıcı bir ad verin.

3. Edge Config SDK'sını Yükleyin

@vercel/edge-config SDK'sını Next.js projenize yükleyin:

npm install @vercel/edge-config
# veya
yarn add @vercel/edge-config
# veya
pnpm install @vercel/edge-config

4. Ortam Değişkenlerini Yapılandırın

EDGE_CONFIG ortam değişkenini yapılandırmanız gerekecek. Bu değişkenin değerini Edge Config'iniz için Vercel panosunda bulabilirsiniz. Bunu .env.local dosyanıza (veya üretim için Vercel proje ayarlarınıza) ekleyin:

EDGE_CONFIG=sizin_edge_config_url_adresiniz

Önemli: .env.local dosyanızı asla deponuza (repository) commit'lemeyin. Üretim ortamları için Vercel'in ortam değişkeni ayarlarını kullanın.

5. Kodunuzda Yapılandırma Değerlerine Erişme

Artık Next.js kodunuzda Edge Config değerlerinize erişebilirsiniz. İşte bir örnek:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const featureFlag = await get('featureFlag');
  const welcomeMessage = await get('welcomeMessage');

  return {
    props: {
      featureFlag,
      welcomeMessage,
    },
  };
}

export default function Home({ featureFlag, welcomeMessage }) {
  return (
    <div>
      <h1>{welcomeMessage}</h1>
      {featureFlag ? <p>Özellik etkin!</p> : <p>Özellik devre dışı.</p>}
    </div>
  );
}

Bu örnekte, getServerSideProps içinde Edge Config'den featureFlag ve welcomeMessage değerlerini alıyoruz. Bu değerler daha sonra Home bileşenine props olarak aktarılır.

6. Yapılandırma Değerlerini Güncelleme

Edge Config'inizdeki değerleri Vercel panosu üzerinden güncelleyebilirsiniz. Değişiklikler küresel olarak milisaniyeler içinde yayılır.

Gelişmiş Kullanım Alanları ve Örnekler

Edge Config ile A/B Testi

Edge Config, A/B testi için mükemmeldir. Bir kullanıcıya uygulamanızın hangi sürümünün sunulacağını belirleyen bir yapılandırma değeri tanımlayabilirsiniz. Örneğin:

  1. abTestGroup adında bir anahtarla bir Edge Config oluşturun.
  2. Değeri A veya B olarak ayarlayın.
  3. Edge Fonksiyonunuzda, abTestGroup değerini okuyun.
  4. Değere bağlı olarak, içeriğinizin A veya B sürümünü sunun.

İşte bir örnek:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const abTestGroup = await get('abTestGroup');

  let content;
  if (abTestGroup === 'A') {
    content = 'Bu A sürümü!';
  } else {
    content = 'Bu B sürümü!';
  }

  return {
    props: {
      content,
    },
  };
}

export default function Home({ content }) {
  return (
    <div>
      <h1>A/B Testi</h1>
      <p>{content}</p>
    </div>
  );
}

Her sürümün performansını izlemek ve hangi sürümün daha iyi performans gösterdiğini belirlemek için analitik araçları kullanabilirsiniz. Kapsamlı A/B testi veri toplama ve analizi için Google Analytics, Amplitude veya Mixpanel gibi araçları değerlendirin.

Edge Config ile Özellik Bayrakları (Feature Flags)

Özellik bayrakları, yeni kod dağıtmadan özellikleri etkinleştirmenize veya devre dışı bırakmanıza olanak tanır. Bu, yeni özellikleri üretimde test etmek veya özellikleri kademeli olarak bir kullanıcı alt kümesine sunmak için kullanışlıdır. A/B testine benzer şekilde, özellik kullanılabilirliğini Edge Config'inizdeki basit bir boolean bayrak ile kontrol edebilirsiniz.

  1. newFeatureEnabled adında bir anahtarla bir Edge Config oluşturun.
  2. Değeri true veya false olarak ayarlayın.
  3. Edge Fonksiyonunuzda, newFeatureEnabled değerini okuyun.
  4. Değere bağlı olarak, yeni özelliği etkinleştirin veya devre dışı bırakın.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

export async function MyComponent() {
  const newFeatureEnabled = await get('newFeatureEnabled');

  return (
    <div>
      {newFeatureEnabled ? <p>Yeni özellik etkin!</p> : <p>Yeni özellik devre dışı.</p>}
    </div>
  );
}

export default MyComponent;

Edge Config ile Kişiselleştirme

Kullanıcı tercihlerine veya konumuna göre içeriği ve deneyimleri kişiselleştirmek için Edge Config'i kullanabilirsiniz. Örneğin, kullanıcı tercihlerini bir veritabanında saklayabilir ve ardından bu tercihlere göre farklı içerik sunmak için Edge Config'i kullanabilirsiniz.

Örnek Senaryo: Küresel bir e-ticaret sitesi, kullanıcının ülkesine göre ürün önerileri göstermek istiyor. Ülkeleri öneri kategorileriyle eşleştirmek için bir Edge Config kullanabilirler.

  1. countryToCategoryMap adında bir anahtarla bir Edge Config oluşturun.
  2. Değeri, ülkeleri ürün kategorileriyle eşleştiren bir JSON nesnesine ayarlayın (ör. {"US": "Elektronik", "GB": "Moda", "JP": "Ev Eşyaları"}).
  3. Edge Fonksiyonunuzda, countryToCategoryMap değerini okuyun.
  4. Kullanıcının ülkesini belirleyin (ör. IP adresinden veya bir çerezden).
  5. Uygun ürün kategorisini belirlemek için countryToCategoryMap'i kullanın.
  6. Bu kategoriden ürün önerileri görüntüleyin.
// pages/products.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps(context) {
  const countryToCategoryMap = await get('countryToCategoryMap');
  const country = context.req.headers['x-vercel-ip-country'] || 'US'; // Varsayılan olarak US
  const category = countryToCategoryMap[country] || 'General'; // Varsayılan olarak Genel

  // Kategoriye göre ürün önerilerini getir
  const products = await fetchProducts(category);

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Ürün Önerileri</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Gerçek ürün getirme mantığınızla değiştirin
  return [
    { id: 1, name: `Ürün 1 (${category})` },
    { id: 2, name: `Ürün 2 (${category})` },
  ];
}

Bu örnek, kullanıcının ülkesini belirlemek için x-vercel-ip-country başlığını kullanır. Bu başlık Vercel tarafından otomatik olarak eklenir. Yalnızca IP tabanlı coğrafi konuma güvenmenin her zaman doğru olmayabileceğini unutmamak önemlidir. Geliştirilmiş doğruluk için kullanıcı tarafından sağlanan konum veya daha gelişmiş coğrafi konum servisleri gibi diğer yöntemleri kullanmayı düşünün.

Edge Config ile Coğrafi Yönlendirme

Kullanıcıları konumlarına göre farklı kaynaklara yönlendirmek için Edge Config'i kullanabilirsiniz. Bu, yerelleştirilmiş içerik sunmak veya bölgesel düzenlemelere uymak için kullanışlıdır.

  1. countryToRedirectMap adında bir anahtarla bir Edge Config oluşturun.
  2. Değeri, ülkeleri URL'lerle eşleştiren bir JSON nesnesine ayarlayın (ör. {"CN": "/china", "DE": "/germany"}).
  3. Edge Fonksiyonunuzda, countryToRedirectMap değerini okuyun.
  4. Kullanıcının ülkesini belirleyin (ör. IP adresinden).
  5. Kullanıcıyı uygun URL'ye yönlendirin.
// pages/_middleware.js
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config';

export async function middleware(req) {
  const countryToRedirectMap = await get('countryToRedirectMap');
  const country = req.geo.country || 'US'; // Varsayılan olarak US
  const redirectUrl = countryToRedirectMap[country];

  if (redirectUrl) {
    return NextResponse.redirect(new URL(redirectUrl, req.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/',
}

Bu örnek, Vercel'in Edge Ağı tarafından kullanıcının ülke koduyla otomatik olarak doldurulan req.geo.country özelliğini kullanır. Bu, x-vercel-ip-country başlığını doğrudan ayrıştırmaktan daha temiz ve daha güvenilir bir yaklaşımdır. Middleware işlevi, kullanıcının ülkesi için Edge Config'de bir yönlendirme URL'si tanımlanıp tanımlanmadığını kontrol eder. Eğer öyleyse, kullanıcıyı o URL'ye yönlendirir. Aksi takdirde, isteği işlemeye devam eder.

Edge Config ile Hız Sınırlaması (Rate Limiting)

Edge Config tam teşekküllü bir hız sınırlama çözümü olarak tasarlanmamış olsa da, temel hız sınırlaması uygulamak için diğer tekniklerle birlikte kullanabilirsiniz. Fikir, hız sınırlama parametrelerini (ör. dakika başına istek sayısı) Edge Config'de saklamak ve ardından bu parametreleri Edge Fonksiyonlarınızda hız sınırlarını uygulamak için kullanmaktır.

Önemli Not: Bu yaklaşım basit hız sınırlaması senaryoları için uygundur. Daha sağlam hız sınırlaması için, özel hız sınırlama hizmetlerini veya ara yazılımları (middleware) kullanmayı düşünün.

  1. requestsPerMinute ve blockedIps gibi anahtarlarla bir Edge Config oluşturun.
  2. requestsPerMinute değerini istenen hız sınırına ayarlayın.
  3. blockedIps değerini engellenmesi gereken bir IP adresi dizisine ayarlayın.
  4. Edge Fonksiyonunuzda, requestsPerMinute ve blockedIps değerlerini okuyun.
  5. Kullanıcının IP adresinin blockedIps dizisinde olup olmadığını kontrol edin. Eğer öyleyse, isteği engelleyin.
  6. Son bir dakika içinde her IP adresinden gelen istek sayısını izlemek için bir önbellekleme mekanizması (ör. Redis veya Vercel'in Edge Cache'i) kullanın.
  7. Kullanıcının IP adresinden gelen istek sayısı requestsPerMinute sınırını aşarsa, isteği engelleyin.

Örnek (Açıklayıcı - Önbellekleme için Ek Uygulama Gerektirir):

// pages/api/protected-route.js
import { get } from '@vercel/edge-config';

export default async function handler(req, res) {
  const requestsPerMinute = await get('requestsPerMinute');
  const blockedIps = await get('blockedIps');
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress; // Kullanıcının IP'sini al

  // IP'nin engellenip engellenmediğini kontrol et
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Çok Fazla İstek');
  }

  // TODO: İstek sayma ve önbellekleme uygulayın (ör. Redis veya Vercel Edge Cache kullanarak)
  // Örnek (Kavramsal):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Çok Fazla İstek');
  // }
  // await incrementRequestCount(ip);

  // Korunan rota mantığınız burada
  res.status(200).send('Korunan rotaya başarıyla erişildi!');
}

Hız Sınırlaması İçin Önemli Hususlar:

Edge Config Kullanımı İçin En İyi Uygulamalar

Edge Config'e Alternatifler

Edge Config güçlü bir araç olsa da, her kullanım durumu için her zaman en iyi çözüm değildir. İşte dikkate alınması gereken bazı alternatifler:

Sonuç

Next.js Edge Config, yapılandırmayı küresel olarak edge'de yönetmek ve dağıtmak için güçlü bir araçtır. Edge Config'den yararlanarak, uygulamanızın performansını optimize edebilir, kişiselleştirilmiş deneyimler sunabilir ve yapılandırma yönetimi iş akışınızı basitleştirebilirsiniz. İster küresel bir e-ticaret sitesi, ister bir sosyal medya platformu veya başka türde bir web uygulaması oluşturuyor olun, Edge Config dünya çapındaki kullanıcılarınıza hızlı ve ilgi çekici bir deneyim sunmanıza yardımcı olabilir. Olasılıkları keşfedin ve potansiyelini ortaya çıkarmak için Edge Config'i bugün Next.js projelerinize entegre edin!