Seatext library

How to Add SeaText to a Next.js Website

Add SeaText to Next.js by pasting the provided JavaScript snippet into your layout or _document file, or by using a script component with strategy="lazyOnload". The General/Custom installation path from SeaText's platform selector gives you...

Quick answer

SeaText does not publish a dedicated Next.js plugin. Use the General / Custom installation option from the platform selector to get a single JavaScript snippet, then add that snippet to your Next.js app so it loads on every page. The most reliable place is the root layout (App Router) or _document.js (Pages Router) using Next.js's Script component with strategy="lazyOnload".

Why SeaText on Next.js?

SeaText is an AI marketing platform that adapts your website content in real time. It reads the campaign, keyword, and visitor intent behind each click, then rewrites headlines, offers, product blocks, and CTAs to match that intent. This can lift conversion rates by up to 30% or more, according to SeaText's own benchmarks. For Next.js sites, the integration is straightforward because SeaText works with any framework that can load a JavaScript snippet.

Next.js is a popular React framework for building fast, SEO-friendly websites. It supports both static generation and server-side rendering. Adding SeaText does not interfere with these features if you place the snippet correctly. The snippet loads asynchronously, so it does not block page rendering.

Prerequisites

  • A SeaText account and an active project in the dashboard.
  • Access to your Next.js codebase (App Router on Next.js 13+ or Pages Router on older versions).
  • The SeaText installation snippet copied from the General / Custom step in the platform selector.
  • Basic familiarity with Next.js file structure and component syntax.

How the SeaText snippet works

The snippet is a small JavaScript block that loads the SeaText runtime and your project configuration. It contains a unique project ID and the loader for all active AI agents. When a visitor loads your page, the snippet initializes the runtime, which then communicates with SeaText's servers to fetch any content adaptations for that visitor. The runtime applies changes to the DOM in real time, such as rewriting headlines or translating text.

Because the snippet runs in the browser, it works with any server-side rendering or static generation approach. It does not require changes to your Next.js server code. The snippet only needs to be present on every page where you want SeaText to operate.

Step-by-step: App Router (Next.js 13+)

If you use the App Router, the root layout is the best place to add the snippet. This ensures it loads on every route. Follow these steps:

  1. Open app/layout.tsx (or .js).
  2. Import Script from next/script.
  3. Inside the root <html> or <body>, add a <Script> tag with your SeaText snippet and strategy="lazyOnload".
  4. Save and deploy. The snippet will load after the page is interactive, keeping Lighthouse scores clean.
// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="seatext"
          strategy="lazyOnload"
          dangerouslySetInnerHTML={{
            __html: `
              // PASTE YOUR SEATEXT SNIPPET HERE
              (function() { ... })();
            `
          }}
        />
      </body>
    </html>
  );
}

Why lazyOnload? This strategy tells Next.js to load the script after the page becomes interactive. It does not block the initial render or delay the LCP (Largest Contentful Paint). SeaText's runtime is about 30 KB gzipped, so the impact on performance is minimal. If you use beforeInteractive, the script loads before the page hydrates, which can hurt Core Web Vitals. Avoid that unless you have a specific reason.

Step-by-step: Pages Router (legacy)

For older Next.js projects using the Pages Router, you add the snippet to _document.js. This file is rendered on the server and controls the initial HTML structure. Follow these steps:

  1. Open pages/_document.js.
  2. Extend Document and override render().
  3. Insert a <Script> component (from next/script) in <Head> or at the end of <Body> with the same strategy="lazyOnload".
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
          <Script
            id="seatext"
            strategy="lazyOnload"
            dangerouslySetInnerHTML={{
              __html: `
                // PASTE YOUR SEATEXT SNIPPET HERE
                (function() { ... })();
              `
            }}
          />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

Note: _document.js is only rendered on the server. The script tag will appear in the initial HTML and then be hydrated by Next.js. This approach works with static generation (getStaticProps) and server-side rendering (getServerSideProps).

Where to get the snippet

Go to the SeaText platform selector page, choose General / Custom, and copy the JavaScript block shown there. That snippet contains your project ID and the loader for all active AI agents (CRO Optimizer, Google Ads Agent, Translation Agent, Bot Refund Agent, etc.). The platform selector lists many CMS options, but for Next.js you always pick General / Custom because there is no dedicated plugin.

After copying, paste it into your Next.js file as shown above. Make sure you replace the placeholder comment with the actual snippet code. Do not modify the snippet unless you know what you are doing.

Verification step

After deploying, verify that SeaText is working correctly:

  1. Open your deployed site in an incognito window.
  2. Open DevTools → Console. You should see a log like SeaText initialized or network requests to cdn.seatext.com.
  3. In the SeaText dashboard, the project status should flip to Active within a few minutes.

If you do not see the log, check that the snippet is placed in the correct file and that there are no JavaScript errors. Also confirm that you have activated at least one agent in the dashboard. The snippet loads the runtime, but agents must be toggled on for any changes to occur.

Key facts

ItemDetails
Installation methodGeneral / Custom JavaScript snippet
Supported routersApp Router (Next.js 13+), Pages Router (legacy)
Script loading strategylazyOnload recommended
Agents activated via snippetCRO Optimizer, Google Ads Agent, Translation Agent (125 languages), Bot Refund Agent, Visitor Source Adaptation Agent, Chat Agent
Dashboard activationRequired after snippet is live
No-code CMS integrationsWordPress, Shopify, Webflow, HubSpot, Bubble, and 200+ others (not Next.js)

Common mistakes

  • Placing the snippet in a page component instead of the root layout — it will only load on that route. Use the root layout or _document.js to cover all pages.
  • Using strategy="beforeInteractive" — blocks hydration and hurts Core Web Vitals. Stick with lazyOnload.
  • Forgetting to activate agents in the dashboard — the snippet loads, but no rewrites or translations happen until you toggle agents on.
  • Hard-coding the snippet in public/ files — bypasses Next.js's script optimization and CSP handling. Use the Script component.
  • Copying the snippet from a CMS-specific page — you might get a snippet with extra code that expects a CMS environment. Always use General / Custom.

Performance and Core Web Vitals

SeaText is designed to have minimal impact on performance. The runtime is small and loads asynchronously. With lazyOnload, the script starts after the page is interactive, so it does not affect LCP or TBT (Total Blocking Time). However, if you have a very strict performance budget, you can further optimize by loading the snippet only on specific routes where you need it. For example, if you only use SeaText on landing pages, move the <Script> into a layout that wraps only those routes.

Another consideration is the number of agents you activate. Each agent adds some processing, but SeaText claims the runtime is efficient. You can monitor performance using Next.js's built-in analytics or third-party tools like Lighthouse.

Security and Content Security Policy

If your site uses a Content Security Policy (CSP), you must allow SeaText's domain and any inline scripts. Add cdn.seatext.com to your script-src directive. If you use dangerouslySetInnerHTML for the snippet, you also need to allow inline scripts via a hash or nonce. Next.js can generate a nonce for you if you configure it properly. Without CSP adjustments, the snippet will be blocked and SeaText will not work.

Also, ensure that your CSP does not block connections to SeaText's API endpoints. You may need to add connect-src entries for api.seatext.com or similar. Check SeaText's documentation for the exact domains.

Limitations & when this advice doesn't apply

  • If you run a strict Content Security Policy, you must add cdn.seatext.com (and any inline script hashes) to script-src.
  • Edge runtime pages (middleware, edge API routes) cannot inject the snippet; it only works in standard Node.js-rendered pages.
  • Server Components that stream without a <body> tag (rare custom setups) may need the snippet in a client wrapper component instead.
  • This guide covers the General/Custom path only. If SeaText releases an official Next.js plugin later, prefer that.
  • SeaText does not work with static export (next export) if you need server-side features, but the snippet itself is client-side, so it should work. However, you must ensure the snippet is included in the exported HTML.

Troubleshooting

If SeaText does not appear to work, check these common issues:

  • No console log — the snippet may not be loading. Verify the file path and that you pasted the code correctly.
  • Agents not active — go to the dashboard and toggle on the agents you need.
  • CSP blocking — check the browser console for CSP violation errors.
  • Route not covered — if you placed the snippet in a layout, ensure that layout wraps the route you are testing.
  • Cache issues — clear your browser cache or use incognito mode.

Terminology

General / Custom
The platform-agnostic installation option SeaText provides for frameworks without a dedicated plugin.
AI Agent
A single-purpose automation (e.g., Google Ads Agent rewrites headlines per keyword; Translation Agent serves 125 languages).
Snippet
A small JavaScript block that loads the SeaText runtime and your project configuration.
Dashboard activation
Toggling agents on in the SeaText web UI after the snippet is live on your site.
lazyOnload
A Next.js script loading strategy that defers loading until after the page becomes interactive.

FAQ

Can I use next/head instead of next/script?

You can, but next/script with lazyOnload gives you better control over loading priority and avoids render-blocking. next/head injects raw tags and doesn't deduplicate on route changes.

Does SeaText work with Next.js Middleware or Edge Functions?

The snippet runs in the browser. Middleware and Edge Functions execute on the server before the HTML is sent, so they cannot inject the snippet. Use the root layout as described.

How do I pass dynamic data (user ID, locale) to SeaText?

SeaText reads the page DOM and URL by default. For custom variables, push them to window.seatextData before the snippet loads, or use the SeaText dashboard's targeting rules (UTM, referrer, cookie, country).

Will the snippet slow down my Lighthouse score?

With strategy="lazyOnload" the script loads after the page is interactive, so impact on LCP and TBT is minimal. The SeaText runtime is ~30 KB gzipped.

Can I run SeaText only on specific routes (e.g., landing pages)?

Yes. Move the <Script> into a layout that wraps only those routes, or conditionally render it in a client component that checks pathname.

What if I use the Pages Router with getStaticProps?

The snippet still belongs in _document.js. Static generation does not affect client-side script injection.

Where do I see conversion reports?

In the SeaText dashboard under each agent's reporting tab (conversion by page, keyword, variant, language, bot-refund evidence, etc.).

Does SeaText support Next.js 14 and 15?

Yes. The snippet is framework-agnostic. As long as you can add a Script component, it works with any Next.js version.

Can I use SeaText with TypeScript?

Yes. The snippet is plain JavaScript. You can paste it into a .tsx file using dangerouslySetInnerHTML as shown.

What if I have multiple Next.js apps?

You need to add the snippet to each app separately. Each app will have its own project ID in the SeaText dashboard.

Further reading and comparison sources

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

Further reading and comparison sources

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

Learn more

Visit the website for more information.

Learn more