javascript - Navigator Next.Js App yönlendiricisinde tanımlı değil

Bileşenimde, en üstte "use client" ile işaretlenmiş bu kod parçası var.

Dönüşümde bir butonum var. Navigator share kullanılabilir mi diye soruyorum, sonra gösterilecek. Bunu yapıyorum çünkü Web Share API henüz tüm tarayıcılar tarafından desteklenmiyor. Ayrıca mükemmel bir şekilde çalışıyor. Chrome'da paylaşım butonunu görüyorum ve çalışıyor. Örneğin Firefox'ta bunu görmüyorum (çünkü destek yok). Ayrıca tarayıcı konsolunda herhangi bir hata yok.

Ama, VSCode terminalimde her zaman ReferenceError: navigator is not defined alıyorum.
Neden? Ve bundan nasıl kurtulabilirim?

Sayfam tsx dosyamda, "use client" olarak işaretlenmiş olan kod parçası:
Başka hiçbir yerde navigator kullanmıyorum, bu yüzden terminalimdeki hatanın kaynağı bu, ama aslında sadece çalışıyor.

            {navigator && navigator?.share && (
              <button
                className="absolute top-6 right-16"
                onClick={() => {
                  navigator
                    .share({
                      title: 'Title: ' + article.title,
                      url: 'http://localhost:3000/articles/' + article.id,
                    })
                    .then(() => console.log('Successful share'))
                    .catch(() => console.log('Error sharing'));
                }}
              >
                <Image src={Share} className="w-6 h-6" alt={'Share Icon'} />
              </button>
            )}

Cevap #1

'use client' yönergesi ile işaretlenmiş sayfalar hala sunucu tarafında render edilmektedir (SSR), bu yüzden tarayıcı API'lerini kullanıyorsanız undefined hatası görürsünüz. SSR'yi şu şekilde next/dynamic kullanarak devre dışı bırakabilirsiniz:

import dynamic from "next/dynamic";

const ClientComponent = dynamic(
  () => import("./components/ClientComponent"),
  { ssr: false }
);

const App = () => {
  return (
    <>
      <ClientComponent />
    </>
  )
}

Cevap #2

Bunun çözümü, önce kodun sunucuda mı yoksa istemcide mi çalıştığını kontrol etmenizdir,

yani bunu aşağıdaki gibi yapmanız gerekiyor

    {typeof window !== 'undefined' && navigator && navigator?.share && (
              <button
                className="absolute top-6 right-16"
                onClick={() => {
                  navigator
                    .share({
                      title: 'Title: ' + article.title,
                      url: 'http://localhost:3000/articles/' + article.id,
                    })
                    .then(() => console.log('Successful share'))
                    .catch(() => console.log('Error sharing'));
                }}
              >
                <Image src={Share} className="w-6 h-6" alt={'Share Icon'} />
              </button>
            )}

zaten 'use client' varken neden buna ihtiyacınız olduğuna gelince, istemci bileşenleri aslında next'in sayfaları ile aynıdır, burada bileşen hem sunucuda hem de istemcide çalıştırılır

İşte bu yüzden sunucu kayıtlarınızda navigator hatası alıyorsunuz.