Next.js ile Site İçi Sesli Komut

Web erişilebilirliği (Accessibility – a11y), modern web uygulamalarının artık opsiyonel değil, zorunlu bir parçası haline geldi. Özellikle görme, motor beceri veya bilişsel engeli bulunan kullanıcılar için klasik fare–klavye etkileşimi her zaman mümkün olmayabiliyor.

Bu makalemde, Next.js App Router mimarisi kullanan bir uygulamada, engelli bireylerin site içinde rahatça gezinebilmesi için geliştirilmiş sesli komut tabanlı navigasyon sistemini, react-speech-recognition npm paketi üzerinden anlatmaya çalışacağım.

Temel Amaç: Kullanıcının "Anasayfaya git", "Ürünleri aç", "Sepete git" gibi doğal dil komutlarıyla site içinde dolaşabilmesini sağlamak.

Neden Sesli Komut? (Accessibility Perspektifi)

Sesli komut sistemleri özellikle şu kullanıcı grupları için fayda sağlar;

Görme engelli ve ya az gören bireyler,
Motor becerileri sınırlı kullanıcılar,
Bilişsel yükü azaltmak isteyen kullanıcılar.

Next.js App Router’da Sesli Komut Mantığı

Next.js App Router mimarisinde dikkat edilmesi gereken en önemli nokta, speech recognition sadece Client Component'ta çalışır.

Bu yüzden sesli komut yapısını global bir provider ve ya layout'a bağlı client-side controller olarak konumlandırmak en sağlıklı yaklaşımdır.

Kullanacağımız npm Paketi: "react-speech-recognition"

react-speech-recognition, Web Speech API üzerine inşa edilmiş, Next.js uyumlu bir ses tanıma kütüphanesidir.

Öne Çıkan Özellikleri

Sürekli dinleme,
Doğal dil komut eşleştirme,
Çoklu dil desteği,
Hook tabanlı API (useSpeechRecognition),
Erişilebilirlik projelerine uygun yapı.

Kurulum


    npm install react-speech-recognition

Temel Mimari: Komut → Aksiyon → Navigasyon

Sesli komut sistemini 3 ana katmana ayırmak, sürdürülebilirliği ciddi şekilde artırır:

Komut Tanımları
Yorumlama (Intent Mapping)
Next.js Router Aksiyonları


    'use client';

    import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
    import { useRouter } from 'next/navigation';
    import { useEffect } from 'react';

    export function VoiceNavigation() {
      const router = useRouter();

      const commands = [
        {
          command: ['anasayfaya git', 'ana sayfa'],
          callback: () => router.push('/')
        },
        {
          command: ['ürünleri aç', 'ürünler'],
          callback: () => router.push('/urunler')
        },
        {
          command: ['sepete git', 'sepet'],
          callback: () => router.push('/sepet')
        },
        {
          command: ['geri dön'],
          callback: () => router.back()
        }
      ];

      const {
        listening,
        browserSupportsSpeechRecognition
      } = useSpeechRecognition({ commands });

      useEffect(() => {
        SpeechRecognition.startListening({
          continuous: true,
          language: 'tr-TR'
        });
      }, []);

      if (!browserSupportsSpeechRecognition) return null;

      return (
        <div aria-live="polite" className="sr-only">
          {listening ? 'Sesli komut dinleniyor' : 'Sesli komut kapalı'}
        </div>
      );
    }

Layout Entegrasyonu (App Router)


    // app/layout.tsx
    import { VoiceNavigation } from '@/components/voice-navigation';

    export default function RootLayout({ children }) {
      return (
        <html lang="tr">
          <body>
            <VoiceNavigation />
            {children}
          </body>
        </html>
      );
    }

Bu yapı sayesinde:

Uygulama açık olduğu sürece sesli komutlar aktif kalır,
Sayfa değişimlerinde state kaybolmaz.

1. Görsel Geri Bildirim Zorunlu Değil

Sesli komut sistemleri:

Ekranı kapalı kullanıcılar
Screen reader kullanan bireyler için görsel bileşene bağımlı olmamalıdır.

Bu nedenle aria-live="polite" kullanımı önemlidir.

2. Komutlar Doğal Dil Olmalı

Yanlış: "/products sayfasına git"
Doğru: "ürünleri aç", "ürünlere git", vb.

Performans ve SEO'ya Etkisi

Sesli komut sistemi client-side çalışır,
SSR, SEO veya crawl edilebilirlik üzerinde olumsuz etkisi yoktur,
JavaScript kapalıysa sistem otomatik devre dışı kalır.

Gerçek Hayat Senaryosu

Görme engelli bir kullanıcı, siteye giriş yaptığında;

"ürünleri aç",
"filtreleri göster",
"sepete git",
"ödeme sayfasına geç"

komutlarıyla hiçbir fiziksel etkileşim olmadan alışveriş yapabilir.

Sonuç

Next.js App Router ile geliştirilen modern web uygulamalarında;

react-speech-recognition,
Doğru mimari,
Erişilebilirlik odaklı düşünceler

bir araya geldiğinde, engelli bireyler için fark yaratan ürünler ortaya çıkar.

Sesli komut, yalnızca ekstra bir özellik değil, herkes için eşit web deneyiminin anahtarlarından biridir.

Yazılım Javascript Nextjs

23 Ara 2025

Yorum

atailkkan Next.js Developer