# bir next.js sitesine canlı sohbet ekleyin
Spookat sohbetini app router ya da pages router kullanan bir Next.js uygulamasına görünümüyle ve isteğe bağlı giriş yapmış kullanıcıyla ekleyin, tıklamadan önce API'mize hiç istek gitmediğini doğrulayın.
2026-11-04 · Kuba
Next.js'te canlı sohbet, kök layout'ta tek bir script etiketidir. Bu rehber, etiketin app router ve pages router'da nereye gittiğini, yükleme sırasını bozmadan widget'ın görünümünü ve giriş yapmış kullanıcıyı nasıl ileteceğinizi, bir Content Security Policy'ye neler ekleneceğini ve sonucu bir production build'de nasıl kontrol edeceğinizi gösteriyor.
## kısa versiyon
App router'da etiketi `app/layout.tsx` içinde, `` içine ekleyin:
```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`YOUR_SITE_KEY` yerine paneldeki kurulum sayfasından aldığınız anahtarı yazın. Görünüm panelde durduğunda, ki varsayılan budur, kurulumun tamamı bu. Rehberin geri kalanı daha fazla kontrol istediğiniz durumlar için. Sıfırdan başlıyorsanız, hesap tarafını [ana rehber](/tr/blog/add-live-chat-to-your-website/) anlatıyor.
## neden kök layout
Kök layout her rotayı sarar ve kullanıcı gezinirken bağlı kalır. Başlatıcı kendini sayfaya bir kez bağlar. İstemci tarafı gezinme sayfayı yeniden yüklemez, dolayısıyla başlatıcıyı da yeniden yüklemez ve ziyaretçi sitede dolaşırken bir konuşmayı açık tutabilir.
Etiketi bir sayfa bileşenine koyarsanız sohbet yalnızca o sayfada olur. Birkaç sayfada render edilen bir bileşene koyarsanız, tam yeniden yüklemelerde kopyalar oluşur (başlatıcı kendi ikinci kopyasını yok sayar ama yine de boşa giden bir istektir).
## next/script ile
`next/script`, Next.js'te üçüncü taraf betikleri yüklemenin yoludur ve burada gayet iyi çalışır:
```tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`afterInteractive`, başlatıcıyı hidrasyondan hemen sonra yükler. `lazyOnload` tarayıcının boşa çıkmasını bekler, bu da yavaş telefonlarda düğmenin görünmesini biraz geciktirir. 2 kb'lık bir başlatıcı için ikisi de uygundur; `afterInteractive` düğmeyi daha erken gösterir. Başlatıcı için `beforeInteractive` kullanmayın: boşuna kendi kodunuzla yarışır.
## görünümü kodda ayarlamak
Panelde yayımladığınız görünüm başlatıcının içinde gelir. Onu depoda tutmayı tercih ederseniz, başlatıcı çalışmadan önce `window.Spookat` ayarlayın. Sayfanın yapılandırması panelinkinin önüne geçer.
Yükleme sırası önemlidir: başlatıcı çalıştığında yapılandırmanın var olması gerekir. `next/script` ile yapılandırmaya `beforeInteractive` (kök layout'ta izinli), başlatıcıya `afterInteractive` verin:
```tsx
import Script from "next/script";
const spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`beforeInteractive` betikleri hidrasyondan önce, `afterInteractive` olanlar sonra çalışır, bu yüzden sıra garantidir. Anahtarlar her yerdekiyle aynıdır: `style` (8 taneden biri), `font`, `accent`, `side`, `greeting`, `label`, `lang`. Hepsi [dokümanlarda](/tr/docs/) listeleniyor.
## pages router
Pages router'da ortak sarmalayıcı `pages/_app.tsx` dosyasıdır:
```tsx
import type { AppProps } from "next/app";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}
```
Bir yapılandırma için, pages router'da `beforeInteractive` betikleri `pages/_document.tsx` içine gider. `window.Spookat` betiğini oraya, `` içine, yukarıdakiyle aynı `id` ve `strategy` ile koyun ve başlatıcıyı `_app.tsx` içinde bırakın.
## giriş yapmış kullanıcı
pro ve üstünde, sohbete kimin giriş yaptığını söyleyebilirsiniz. Ekibiniz o zaman Slack kartında `logged in as 42` görür; webhook'lar, dışa aktarma ve ajanınızın `read_convo` aracı da kimliği taşır. Kimlik yalnızca sunucunuzun bildiği bir secret ile imzalanır, böylece kimse başkası gibi davranamaz.
Kimlik secret'ını paneldeki kurulum sayfasında oluşturun, bir ortam değişkenine koyun ve sunucuda imzalayın. App router'da kök layout bir sunucu bileşenidir, bu da işi kolaylaştırır:
```tsx
import { createHmac } from "node:crypto";
import Script from "next/script";
import { getSession } from "@/lib/auth"; // yours
const sign = (id: string) => createHmac("sha256", process.env.SPOOKAT_IDENTITY_SECRET!).update(id).digest("hex");
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const session = await getSession();
const user = session ? { id: String(session.userId), sig: sign(String(session.userId)) } : undefined;
return (
{children}
{user && (
)}
);
}
```
İmzayı asla bir istemci bileşeninde hesaplamayın: secret tarayıcıya gider. Eksik ya da yanlış bir imza hata değildir; sohbet sadece kim olduğunu söylemez. Oturumu kök layout'ta okumak her sayfanın istek başına render edilmesine yol açar, bu yüzden layout'unuz bugün statikse eklemeden önce bunu tartın.
## content security policy
Uygulamanız bir `Content-Security-Policy` header'ı gönderiyorsa, widget'ın ihtiyaç duyduğu şunlar:
- `script-src` ve `style-src`: `https://cdn.spookat.com`
- `font-src`: barındırılan bir font seçtiyseniz `https://cdn.spookat.com`
- `connect-src`: tıklamadan sonraki sohbet bağlantısı için `wss://api.spookat.com`
- `img-src`: logolar ve ekip arkadaşlarının fotoğrafları için `data:`
- `style-src`: başlatıcı kendi shadow root'una küçük bir `