Agenci AI na stronie Next.js z ASDK

Zespoły, które budują stronę marketingową w Next.js, przy dodawaniu zewnętrznego skryptu zwykle dbają o dwie rzeczy: nie może spowalniać strony i nie może kłócić się z routingiem. ASDK to jeden hostowany skrypt, który ładuje się asynchronicznie, sam śledzi nawigację po stronie klienta i jest konfigurowany w panelu, więc wystarczy jeden komponent w głównym layoucie, bez zmian w poszczególnych trasach.

Co ASDK dodaje do strony w Next.js

ASDK buduje jedną bazę wiedzy z twoich publicznych stron, czytając je tak jak wyszukiwarka, oraz z przesłanych dokumentów. Każdy włączony agent odpowiada na jej podstawie.

• Chat (wczesny dostęp, od planu Free) odpowiada odwiedzającym na podstawie twojej dokumentacji, cennika i stron produktów, linkuje strony, z których pochodzi każda odpowiedź, i proponuje zostawienie danych kontaktowych, gdy nie może pomóc.
• Agent-Ready (wczesny dostęp, od planu Free) publikuje to, co wie twoja baza wiedzy, w formatach dobrze czytelnych dla asystentów AI, takich jak hostowany plik llms.txt.
• Sales (wczesny dostęp, od planu Pro) zadaje pytania kwalifikacyjne, które opisujesz zwykłym językiem, i proponuje spotkanie odwiedzającym, którzy pasują.
• Search pojawi się wkrótce. Będzie odpowiadać zamiast pola wyszukiwania w dokumentacji, ze źródłami.

Strony renderowane na serwerze i generowane statycznie crawler czyta najłatwiej. Jeśli części twojej strony renderują się tylko w przeglądarce, upewnij się, że najważniejsze fakty są też w HTML wysyłanym przez serwer.

Jak agenci czytają stronę w Next.js

Baza wiedzy powstaje z twoich publicznych stron, które crawler ASDK czyta tak jak wyszukiwarka. Przedstawia się i przestrzega reguł z robots.txt; strona o crawlerze wyjaśnia, jak to robi. O tym, jak dobrze czyta stronę w Next.js, decydują trzy rzeczy:

• Co wysyła serwer. Strony generowane statycznie lub renderowane na serwerze mają tekst w HTML i to najprostszy przypadek. Tekst, który pojawia się dopiero po pobraniu danych po stronie klienta, może być niewidoczny dla crawlera.
• Na co pozwala robots.txt. Jeśli twój robots.txt blokuje nieznane crawlery, ASDK nie przeczyta twoich stron. Zezwól mu wprost albo sprawdź reguły, zanim dodasz swoją stronę.
• Co jest publiczne. Dokumentacja za logowaniem, wdrożenia podglądowe i strony wyłączone z wyszukiwarek zostają poza bazą, chyba że prześlesz ich treść jako dokumenty.

Ponieważ każdy agent odpowiada na podstawie tej bazy wiedzy, te same strony, które pomagają wyszukiwarkom, poprawiają też odpowiedzi agentów: przejrzysty cennik, konkretne strony produktów i uczciwe FAQ.

Instalacja w App Router

Dodaj skrypt do głównego layoutu, app/layout.tsx, za pomocą komponentu next/script:

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.asdk.com/v1/asdk.js"
          data-site-id="SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

next/script przekazuje do tagu script dodatkowe atrybuty, takie jak data-site-id, a skrypt w głównym layoucie ładuje się raz, niezależnie od tego, jak odwiedzający nawiguje. Poradnik Next.js o ładowaniu skryptów wyjaśnia strategie ładowania (sprawdzono w październiku 2026). afterInteractive jest tu właściwa: widżet nie jest potrzebny, zanim strona stanie się interaktywna.

Szybkość bez kompromisów

Widżet jest zbudowany tak, by nie obciążać twojego budżetu wydajności:

• Nie ma go w twoim bundlu. Skrypt jest hostowany pod cdn.asdk.com, więc nie dodaje nic do twoich chunków JavaScriptu i aktualizuje się bez ponownego wdrożenia strony.
• Ładuje się, gdy strona jest już interaktywna. Z afterInteractive Next.js ładuje skrypt, gdy strona może już reagować na działania użytkownika, więc nie konkuruje z twoim kodem przy pierwszym renderowaniu.
• Ładuje się raz. W głównym layoucie skrypt przetrwa nawigację po stronie klienta; przechodzenie między stronami nie pobiera go ponownie.

Zmierz wydajność przed i po narzędziami, których już używasz, takimi jak Lighthouse czy monitoring rzeczywistych użytkowników. Jeśli jakaś liczba się zmieni, poradnik rozwiązywania problemów i nasz zespół pomogą ustalić dlaczego.

Inne konfiguracje

• Pages Router. Umieść ten sam element Script w pages/_app.tsx, obok komponentu strony, żeby trafił na każdą stronę.
• React z Vite lub podobną konfiguracją. Wklej zwykły tag script do index.html, tuż przed zamykającym tagiem body. Nie dodawaj go z efektu komponentu: React może w trybie deweloperskim uruchamiać efekty dwukrotnie, a widżet wystarczy załadować raz.
• Inne frameworki. Każdy framework ze wspólnym layoutem lub szablonem dokumentu działa tak samo: załaduj skrypt raz, dla całej witryny. Instrukcja dla HTML opisuje przypadek ogólny.

Pełny kod dla każdego wariantu znajdziesz w instrukcji instalacji dla Next.js i React.

Wywoływanie widżetu z twojej aplikacji

Widżet dodaje globalną funkcję asdk. Żeby wywołać ją, zanim widżet się załaduje, najpierw zdefiniuj małą kolejkę, w index.html albo w inline'owym elemencie Script z atrybutem id:

<script>
  window.asdk = window.asdk || function () { (asdk.q = asdk.q || []).push(arguments); };
</script>

Potem możesz na przykład przekazać zalogowaną osobę po zalogowaniu i zapomnieć ją przy wylogowaniu:

window.asdk("identify", { email: user.email, name: user.name });
window.asdk("shutdown");

asdk("open") otwiera czat z twojego własnego przycisku „Porozmawiaj z nami”.

Content Security Policy i nonce

Jeśli twoja strona wysyła Content Security Policy, zezwól na https://cdn.asdk.com w script-src i na https://api.asdk.com w connect-src. Jeśli polityka używa nonce z 'strict-dynamic', nazwy hostów są ignorowane, a skrypt potrzebuje zamiast tego nonce twojej strony: przekaż go we właściwości nonce komponentu Script.

Poradnik Next.js o Content Security Policy pokazuje, jak tworzyć nonce dla każdego żądania w proxy.ts i odczytywać go w Server Component (sprawdzono w październiku 2026). Zwraca też uwagę na koszt takiego rozwiązania: nonce wymagają renderowania dynamicznego, więc strony, które ich używają, nie mogą być generowane statycznie. Nasza sekcja o CSP wymienia dokładne źródła, których potrzebuje ASDK.

Konfiguracja ASDK na stronie w Next.js

Co jest dostępne, a co pojawi się wkrótce

Całe ASDK jest we wczesnym dostępie: agenci działają i możesz z nich korzystać, ale mogą się zmieniać, w miarę jak je ulepszamy.