Ana içeriğe geç

Frontend Kritik Notlar

NEXT_PUBLIC_* Tuzağı​

DİKKAT

process.env.NEXT_PUBLIC_* değişkenleri build time'da literal string olarak bake edilir. Runtime'da docker-compose environment: ile değiştirilemez!

Yanlış Kullanım​

// ❌ ASLA böyle kullanma!
const apiUrl = process.env.NEXT_PUBLIC_API_URL
fetch(`${apiUrl}/api/devices`)

Doğru Kullanım​

// ✅ Her zaman siteConfig kullan
import { siteConfig } from '@/config/site'
fetch(`${siteConfig.apiUrl}/devices`)

site.ts Nasıl Çalışır​

// config/site.ts
export const siteConfig = {
  apiUrl: getApiUrl(),
  wsUrl: getWsUrl(),
}

function getApiUrl() {
  if (typeof window === 'undefined') {
    // Server-side (SSR): Docker internal URL
    return `${process.env.BACKEND_URL || 'http://localhost:8000'}/api`
  }
  // Client-side: Next.js rewrites proxy
  return '/api'
}

function getWsUrl() {
  if (process.env.NEXT_PUBLIC_WS_URL) return process.env.NEXT_PUBLIC_WS_URL
  // Browser auto-detect
  if (isLocalhost) return 'ws://localhost:8000/ws'
  return `${wsProtocol}//${hostname}/ws`
}

Next.js Rewrites (CORS Bypass)​

// next.config.js
async rewrites() {
  const backendUrl = process.env.BACKEND_URL || 'http://localhost:8000'
  return [{
    source: '/api/:path*',
    destination: `${backendUrl}/api/:path*`
  }]
}

Bu sayede browser'dan gelen /api/* istekleri aynı domain'den geldiği için CORS sorunu olmaz.

TypeScript Tip Tanımları​

Dosyaİçerik
types/index.tsUser, Region, Subregion, Gateway, Device, Measurement, Alarm, PaginatedResponse
types/alarm.ts57 alarm tipi tanımı, NotificationChannels, AlarmPolicy, AlarmIncident, AlarmEvent
types/widget.ts11 widget tipi, 40+ realtime parametre, WidgetConfig
types/zigbee.tsZigbeeGateway, ZigbeeDevice, ZigbeeEnergyMeasurement, DeviceControlCommand
types/contact.tsEmail, SMS, WhatsApp contact'ları

i18n Yapılandırması​

  • Desteklenen diller: Türkçe (TR), İngilizce (EN)
  • Varsayılan: Türkçe
  • Algılama: localStorage → navigator language
  • Cache: localStorage
  • Kullanım: const { t } = useTranslation(); t('key')