Konak Tel Çit

1972'den bu yana tel çit ve güvenlik sistemleri üreten Konak Tel Çit için sıradan bir kurumsal site değil, üretim şirketinin dijital omurgasını tasarladık. Platform; 40+ ürün kataloğu, 5 dilde içerik, 11 teknik hesaplama aracı, TKGM ada/parsel entegrasyonu, yapay zekâ destekli teknik danışman ve tam kapsamlı yönetim paneliyle tek bir Next.js uygulamasında birleşiyor.

Bu proje, statik landing page seviyesinin çok ötesinde: App Router, Server Components, edge proxy, streaming API, function calling ve veritabanı odaklı CMS aynı codebase'de çalışıyor.

Teknoloji Yığını

• Framework: Next.js 16.2 — App Router, edge proxy, RSC, dinamik metadata

• UI: React 19 + React Compiler — otomatik optimizasyon, daha az client JavaScript

• Dil: TypeScript 5 — 395+ dosyada tip güvenliği

• Veritabanı: PostgreSQL 16 + Prisma 6 — ilişkisel model, migration, seed

• Stil: Tailwind CSS 4 — typography plugin

• Yapay Zekâ: Google Gemini — danışman, çeviri, function calling

• Auth: jose (JWT) — edge-uyumlu oturum doğrulama

• Güvenlik: isomorphic-dompurify — XSS korumalı HTML sanitization

• DevOps: Docker Compose — yerel PostgreSQL geliştirme ortamı

Mimari: Next.js 16'ın Gerçek Kullanımı

Edge Proxy

Next.js 16'da middleware yerine proxy kuralı kullanıldı. Tek dosyada üç iş bir arada:

• Admin auth guard — /yonetim altı JWT cookie ile korunuyor

• i18n rewrite — Türkçe URL'de prefix göstermiyor; /urunlerimiz arka planda /tr/urunlerimiz olarak rewrite ediliyor

• Statik ve API bypass — _next, /api ve dosya uzantıları proxy'den geçmiyor

Bu yaklaşım, Türkçe için SEO dostu kısa URL'ler ve diğer diller için /en/, /de/, /ar/, /es/ prefix'leriyle çok dilli yapıyı aynı route ağacında birleştiriyor.

App Router ve Server Components

Neredeyse tüm sayfa bileşenleri async Server Component. Veri doğrudan sunucuda çekiliyor; gereksiz client bundle yok. Ana sayfada 6 farklı veri kaynağı Promise.all ile paralel yükleniyor. generateStaticParams ile dil ve şehir sayfaları build zamanında prerender ediliyor.

Root-Level Ürün URL'leri

Ürünler derin path'lerde değil, doğrudan slug seviyesinde sunuluyor: /3d-panel-cit, /en/3d-panel-cit, /de/jiletli-panel-cit. Eski /urunler/:slug URL'leri next.config.ts içinde kalıcı 308 redirect ile korunuyor — backlink ve SEO kaybı yok.

Tip Güvenli İçerik Sistemi

Statik metinler src/content/ altında şema sürümü ve locale invariant ile yönetiliyor. Dinamik içerik (ürünler, haberler, rehber, çözüm sektörleri) PostgreSQL üzerinden; her model locale bazlı translation tablosu ile 5 dilde tutuluyor.

Veritabanı Tasarımı

Prisma şemasında 20+ model, üretim şirketinin gerçek iş akışına göre tasarlandı:

• Product + ProductTranslation — 40+ ürün, JSON spec (boyutlar, renkler, sertifikalar, FAQ)

• Insight + InsightTranslation — haber odası ve teknik rehber

• City + Dealer — 81 il SEO sayfası, bayi haritası

• SolutionSector — sektör bazlı çözüm matrisleri (sanayi, spor, konut…)

• BomMapping — hesaplayıcı malzeme listesi ile ürün fiyat eşlemesi

• ToolFormulaOverride — admin'den formül parametre düzenleme

• ContactRequest / DealerApplication — lead yönetimi

• AiSettings + AiTrainingDoc — yapay zekâ danışman yapılandırması

• SiteSettings — singleton site ayarları

Çeviri kaynağı izleniyor: isMachineTranslated, translatedAt, reviewedAt — insan onayı ve otomatik çeviri ayrımı panelde görünür.

Yapay Zekâ Teknik Danışmanı

Sitenin en iddialı parçası: Gemini tabanlı, function calling destekli teknik danışman. Danışman uydurma yapmıyor; kullanıcı soru sorduğunda model tanımlı araçları çağırıyor:

• Galvaniz tel hesaplama — çap, uzunluk, kaplama ömrü (EN 10244-2, ISO 9223)

• Panel çit 2D ve 3D m² ağırlık hesaplama

• Tel örgü çit malzeme hesaplama

• Direk beton ve klemp hesaplama

• Kapı ağırlık ve malzeme hesaplama

• Parsel malzeme tahmini — TKGM ada/parsel üzerinden çit malzeme listesi

• Ürün katalog arama

• Şehir bazlı bayi bulma

• İletişim talebi oluşturma (izinliyse)

API endpoint SSE (Server-Sent Events) ile stream ediyor: metin parçaları, araç çağrı durumu, tamamlanma ve hata event'leri. Widget tüm sayfalarda yüzen panel olarak duruyor; Arapça için RTL desteği var. Admin panelinden model seçimi, persona, eğitim dokümanları, rate limit ve lead capture yönetiliyor.

Hesaplama Araçları Hub'ı

/araclar altında 11 bağımsız teknik hesaplayıcı:

• Tel çit hesaplama (ada/parsel + TKGM)

• Galvaniz tel ağırlık

• Panel çit 2D m² ağırlık

• Panel çit 3D m² ağırlık

• Tel örgü çit m² ağırlık

• Dikenli tel rulo

• Direk beton

• Direk klemp hesap

• Boru profil ağırlık

• Kutu profil ağırlık

• Kapı hesap

• AWG ↔ mm dönüşüm

Her araç kendi compute modülünde saf TypeScript hesaplama yapıyor. Admin'den ToolFormulaOverride ile parametre override, isteğe bağlı fiyat gösterimi ve BOM key'lerinin ürün kataloğuna BomMapping ile bağlanması mümkün.

Tel çit hesaplama özellikle özel: TKGM CBS API üzerinden il, ilçe, mahalle, ada/parsel zinciriyle gerçek parsel geometrisi çekiliyor; GeoJSON polygon üzerinden çevre uzunluğu hesaplanıyor ve malzeme + fiyat tahmini üretiliyor.

Çok Dilli (i18n) Strateji

5 dil: Türkçe, İngilizce, Almanca, Arapça, İspanyolca.

• Türkçe = root (/hakkimizda, /3d-panel-cit)

• Diğer diller = prefix (/en/about-us, /de/3d-panel-cit)

• UI string'leri JSON dosyalarından

• Ürün, haber, çözüm içerikleri DB translation tablolarında

• Statik bloklar locale bazlı TypeScript dosyalarında

• Admin panelden Google Translate veya Gemini ile toplu çeviri

• CLI script'leri ile batch çeviri pipeline

Arapça layout'ta dir="rtl" ve dil değiştiricide mevcut sayfanın locale'si korunuyor.

SEO ve Performans

• 30+ sayfada dinamik title, description, Open Graph (generateMetadata)

• Product JSON-LD — schema.org Product, AggregateOffer, Brand, Organization

• 81 şehir sayfası — generateStaticParams ile TR prerender; hedef: "Kayseri tel çit", "Ankara panel çit bayi"

• Kalıcı redirect'ler — eski URL yapısı korunuyor (308)

• React Compiler — reactCompiler: true ile otomatik optimizasyon

• Server Components — minimum client JavaScript

• next/image — optimize görsel sunumu

Yönetim Paneli (/yonetim)

Tam kapsamlı CMS, Next.js App Router içinde:

• Ürünler — CRUD, zengin editör, görsel yükleme, BOM eşleştirme

• Haberler / Rehber — içerik yönetimi, çeviri

• Çözümler — sektör matrisleri, FAQ, araç bağlantıları

• Bayiler — 81 il, harita koordinatları, yetkili bayi rozeti

• Bayi başvuruları — durum akışı (NEW → APPROVED)

• İletişim talepleri — lead pipeline

• Araçlar — formül override, parsel mapping, fiyat aç/kapa

• Yapay Zeka — model, persona, eğitim dokümanları, test sohbet

• Site ayarları — singleton config

• Kullanıcılar — OWNER, ADMIN, EDITOR rolleri

Auth: bcryptjs şifre hash + jose JWT; cookie admin-session; edge proxy'de doğrulama.

Kaynak Kod Örnekleri

Aşağıdaki parçalar projeden birebir alınmış, Next.js 16 mimarisini gösteren gerçek kod örnekleridir.

1. Edge Proxy — Auth + i18n Rewrite (proxy.ts)

Next.js 16'da middleware yerine proxy kuralı. Admin JWT doğrulama ve Türkçe root URL rewrite tek dosyada:

export async function proxy(request: NextRequest) {
  const pathname = request.nextUrl.pathname;

  // Admin auth guard
  if (pathname.startsWith("/yonetim/")) {
    const token = request.cookies.get("admin-session")?.value;
    const session = token ? await verifySessionToken(token) : null;
    if (!session) return NextResponse.redirect("/yonetim/giris");
    return NextResponse.next();
  }

  // Türkçe URL rewrite — adres çubuğu değişmez
  const hasLocale = locales.some(
    (l) => pathname.startsWith(`/${l}/`)
  );
  if (!hasLocale) {
    const url = request.nextUrl.clone();
    url.pathname = `/tr${pathname}`;
    return NextResponse.rewrite(url);
  }
}

2. Async Server Component + generateStaticParams

5 dil için statik param üretimi ve paralel veri yükleme:

export function generateStaticParams() {
  return locales.map((lang) => ({ lang }));
}

export default async function LangLayout({ params }) {
  const { lang } = await params;
  if (!isLocale(lang)) notFound();

  const [dictionary, productMenu] = await Promise.all([
    getDictionary(lang),
    getProductMenu(lang),
  ]);

  return (
    <div>
      <SiteHeader dictionary={dictionary} locale={lang} />
      <main>{children}</main>
      <DanismanWidget lang={lang} />
    </div>
  );
}

3. Türkçe Root URL — localizedPath()

Türkçe prefix yok, diğer diller /en/, /de/ prefix alıyor:

export function localizedPath(locale: string, path: string) {
  const normalized = path.startsWith("/") ? path : `/${path}`;
  if (locale === "tr") return normalized; // /urunlerimiz
  return `/${locale}${normalized}`;       // /en/urunlerimiz
}

4. Gemini Function Calling — AI Danışman Araç Tanımı

Model uydurma yapmıyor; EN 10244-2 ve ISO 9223 standartlarına bağlı gerçek hesaplayıcıyı çağırıyor:

const galvanizTelDecl: FunctionDeclaration = {
  name: "galvaniz_tel_hesapla",
  description: "Galvanizli tel ağırlık veya kaplama ömrü hesaplar.",
  parameters: {
    type: Type.OBJECT,
    properties: {
      islem: {
        type: Type.STRING,
        enum: ["uzunluktan_agirlik", "kaplama_omru"],
      },
      capMm: { type: Type.NUMBER, description: "Tel çapı (mm)" },
      kaplamaSinifi: {
        type: Type.STRING,
        enum: ["A", "AB", "B", "bare"], // EN 10244-2
      },
      atmosfer: {
        type: Type.STRING,
        enum: ["C1", "C2", "C3", "C4", "C5"], // ISO 9223
      },
    },
    required: ["islem", "capMm"],
  },
};

5. SSE Stream + Function Calling Döngüsü

Danışman API'si canlı stream ediyor; model araç çağırdıkça çalıştırıp sonucu geri besliyor:

const stream = new ReadableStream({
  async start(controller) {
  for (let round = 0; round < MAX_TOOL_ROUNDS; round++) {
    const result = await chat.sendMessageStream({ message: nextMessage });

    for await (const chunk of result) {
      if (chunk.text) controller.enqueue(
        sseLine({ type: "text", value: chunk.text })
      );
      if (chunk.functionCalls?.length) {
        for (const call of chunk.functionCalls) {
          controller.enqueue(
            sseLine({ type: "tool", name: call.name })
          );
          const output = await executeTool(call.name, call.args, ctx);
          nextMessage = [{
            functionResponse: {
              name: call.name,
              response: output,
            },
          }];
        }
      }
    }
  }
  controller.enqueue(sseLine({ type: "done" }));
}});

6. Product JSON-LD — Server Component

Google Rich Results için schema.org Product verisi doğrudan HTML'e enjekte ediliyor:

export default function ProductJsonLd({ name, slug, images, origin }) {
  const data = {
    "@context": "https://schema.org",
    "@type": "Product",
    name,
    url: `${origin}/${slug}`,
    brand: { "@type": "Brand", name: "Konak Tel Çit" },
    manufacturer: {
      "@type": "Organization",
      name: "Konak Tel Çit",
      foundingDate: "1972",
    },
    offers: {
      "@type": "AggregateOffer",
      availability: "https://schema.org/InStock",
      priceCurrency: "TRY",
    },
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );
}

7. SEO Redirect — next.config.ts

Eski URL yapısı kalıcı 308 redirect ile korunuyor; backlink kaybı yok:

const nextConfig: NextConfig = {
  reactCompiler: true,
  async redirects() {
    return [
      {
        source: "/:lang(tr|en|de|es|ar)/urunler/:slug",
        destination: "/:lang/:slug",
        permanent: true, // 308
      },
      {
        source: "/urunler/:slug",
        destination: "/:slug",
        permanent: true,
      },
    ];
  },
};

Rakamlarla Proje

• 395+ TypeScript/TSX dosyası

• 15+ Prisma migration

• 5 desteklenen dil

• 11+ hesaplama aracı

• 40+ API route

• 30+ yönetim sayfası

• Panel çit, tel örgü, dikenli tel, kapı, direk, spor… ürün kategorileri

Neden Bu Proje Next.js Referansı?

• Framework'ün son sürümü — Next.js 16 proxy, React 19, React Compiler

• Gerçek full-stack — RSC + API Routes + edge auth + streaming AI + Prisma; ayrı backend yok

• Domain derinliği — TKGM parsel API, galvaniz kaplama ömrü (EN 10244-2), BOM fiyat eşlemesi

• AI entegrasyonu — chatbot değil; function calling ile hesaplayıcılara ve kataloga bağlı teknik danışman

• i18n mimarisi — Türkçe root URL + 4 dil prefix + DB çeviri + otomatik MT pipeline

• Operasyonel hazırlık — Docker, seed script'leri, migration, admin panel, lead yönetimi

Konak Tel Çit platformu, Hitit Medya'nın kurumsal B2B üretim şirketlerine Next.js ile neler yapılabileceğini gösteren referans çalışmasıdır.

Hitit Medya — Web, mobil ve yapay zekâ odaklı yazılım geliştirme.