Skip to content
SEOJuice Docs

Next.js / React Integration

Steps to Integrate SEOJuice

  1. Open your favorite IDE
  2. Update your footer or your app.tsx
GitHub commit showing fix to use native script tag instead of Next.js Script component

Implementation

Insert the snippet as a simple script tag in your layout or footer component:

<script type="text/javascript" src="https://cdn.seojuice.io/suggestions.v1.js" defer></script>
<noscript><img src="https://smart.seojuice.io/pixel" width="1" height="1" alt="" style="display:none"></noscript>

For Next.js App Router, add it to your root layout.tsx:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script
          type="text/javascript"
          src="https://cdn.seojuice.io/suggestions.v1.js"
          defer
        />
        <noscript>
          <img src="https://smart.seojuice.io/pixel" width="1" height="1" alt="" style={{display: 'none'}} />
        </noscript>
      </body>
    </html>
  );
}

The script will do the rest once you’ve added your website in the dashboard.

Verify Your Integration

After adding the script:

  1. Open your site in a browser and press F12 to open DevTools
  2. Go to the Network tab and reload the page
  3. Filter for seojuice or suggestions
  4. You should see a request to cdn.seojuice.io/suggestions.v1.js with status 200
  5. Check the SEOJuice dashboard — your site should show as connected

If you don’t see the request, check that:

  • You’re using a plain <script> tag, not the Next.js <Script> component
  • The script isn’t being blocked by a Content Security Policy
  • Your build is deployed (not just running locally in dev mode)

Server-Side Rendering (Optional)

For additional SEO benefits, you can set up server-side rendering via Cloudflare Workers. This renders SEOJuice optimizations into the HTML before it reaches the browser, which can improve crawlability.

The JavaScript-only approach works well for most cases — Google renders JavaScript and treats dynamic links the same as static ones.

Troubleshooting

If you’re having issues, see Integration Verification for detailed troubleshooting steps.