Modern Headless Web Uygulaması Geliştirme Ortamı: Strapi + Next.js + Elasticsearch

Web uygulamalarında içerik yönetimi, hızlı arama ve kullanıcı dostu arayüzler artık ayrı ayrı teknolojilerle değil, entegre ve ölçeklenebilir bir mimariyle çözümleniyor. Bu yazıda, Next.js (frontend), Strapi (headless CMS) ve Elasticsearch (arama motoru) teknolojilerini bir araya getirerek modern ve gerçek zamanlı bir web uygulamasını nasıl kuracağınızı adım adım göstereceğim.

Kuracağımız yapı hem geliştirici deneyimini (DX) hem de arama motoru optimizasyonunu (SEO) odağa alıyor. Ayrıca tüm sistemi Docker Compose ile yalıtılmış ve kolay yönetilebilir bir şekilde ayağa kaldıracağız.

Hedefimiz

Bu rehberle birlikte:

Next.js üzerinden SEO uyumlu, hızlı bir frontend arayüzü kuracağız
Strapi ile içerikleri yöneteceğiz ve API sağlayacağız
Elasticsearch ile içeriklerde güçlü ve ölçeklenebilir arama altyapısı sağlayacağız
Tüm bu servisleri Docker üzerinden izole ve uyumlu şekilde çalıştıracağız

Mimari Bileşenler

Bileşen	Rolü	Port
Next.js	Frontend (SSR destekli React)	3000
Strapi	Headless CMS (Node.js)	1337
Elasticsearch	Veri arama motoru	9200
Kibana (opsiyonel)	Elasticsearch UI	5601

Proje Yapısı

/your-project
├── docker-compose.yml
├── .env
├── frontend/      # Next.js app
├── backend/       # Strapi app
└── elasticsearch/ # ES config (opsiyonel)

Docker Compose Dosyası

version: "3.8"

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend
    environment:
      - NEXT_PUBLIC_API_URL=http://localhost:1337
    volumes:
      - ./frontend:/app
    command: npm run dev

  backend:
    build: ./backend
    ports:
      - "1337:1337"
    environment:
      - DATABASE_CLIENT=sqlite
      - NODE_ENV=development
      - STRAPI_ADMIN_JWT_SECRET=${STRAPI_ADMIN_JWT_SECRET}
      - ELASTICSEARCH_URL=http://elasticsearch:9200
    volumes:
      - ./backend:/srv/app
    command: npm run develop

  elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch:${ELASTIC_VERSION}
    container_name: elasticsearch
    environment:
      - discovery.type=single-node
      - xpack.security.enabled=false
      - bootstrap.memory_lock=true
      - ES_JAVA_OPTS=-Xms512m -Xmx512m
    ulimits:
      memlock:
        soft: -1
        hard: -1
    ports:
      - "9200:9200"
    volumes:
      - esdata:/usr/share/elasticsearch/data

  kibana:
    image: docker.elastic.co/kibana/kibana:${ELASTIC_VERSION}
    ports:
      - "5601:5601"
    environment:
      - ELASTICSEARCH_HOSTS=http://elasticsearch:9200
    depends_on:
      - elasticsearch

volumes:
  esdata:

Kullanılan Paketler ve Nedenleri

@elastic/eui: Elastic UI bileşenlerini sağlar
next-seo: SEO metatag yapılandırmaları için
moment: Tarih/saat işlemleri için
@emotion/react: Elastic UI’ın stil sistemini destekler
docker/docker-compose: Ortamları izole şekilde ayağa kaldırmak için

Başlatma Komutu

docker-compose up --build

Devamında Ne Yapabiliriz?

SWR veya WebSocket ile canlı veri akışı
Strapi & Elasticsearch senkronizasyonu
Elastic UI ile skor/istatistik arayüzleri
SEO için JSON-LD ve OpenGraph entegrasyonu

Bu yapı, hem modern frontend teknolojisini, hem güçlü içerik yönetimini hem de arama motoru fonksiyonelliğini birleştirerek web projelerinde tam bir çözüm sunar. Docker sayesinde kurulumu kolay, geliştirici dostu ve esnek bir geliştirme ortamı sağlar.

Eğer projenizi SEO uyumlu, hızlı ve ölçeklenebilir hale getirmek istiyorsanız, bu stack tam size göre.

Bercan Özcan