Integrate BlogBott with Your Next.js Application

Unlock the full potential of your Next.js application with a seamlessly integrated, AI-powered blog. This guide will walk you through the simple steps to get BlogBott running, leveraging Next.js features for optimal performance and SEO.

NEXT.JS SETUP INSTRUCTIONS:

Create a blog page

Create a app router file at /blog/page.tsx in your Next.js `app` directory.

Add the page component

Use the following code in your new blog page file. This will handle script loading and initialization for client-side navigation.

"use client";

import Script from "next/script";

declare global {
  interface Window {
    blogbott_initializePage?: () => void;
  }
}

export default function BlogPage() {
  return (
    <>
      <Script
        src="https://blogbott.com/aiblog.js"
        strategy="afterInteractive"
        onReady={() => {
          // The onReady event fires every time the component is mounted,
          // which is exactly what's needed for client-side navigation.
          // We check if the function exists on the window object before calling it.
          if (typeof window.blogbott_initializePage === "function") {
            window.blogbott_initializePage();
          }
        }}
      />
      <div id="blogbott.com_app" />
    </>
  );
}

Deploy and Generate Blogs! 🎉

You're all set! Deploy your changes and use the dashboard to generate SEO-optimized blogs for your Next.js site.

Need help? If you run into any issues with the Next.js setup, feel free to contact me for assistance!

Frequently Asked Questions (FAQ)

How does BlogBott work with Next.js Server-Side Rendering (SSR)?

BlogBott is a client-side solution that is fully compatible with Next.js SSR. The initial page is rendered on the server, and then BlogBott's script takes over on the client-side to render the blog content. This approach ensures fast initial page loads and a dynamic, interactive blog experience.

Can I customize the look and feel of my BlogBott blog in Next.js?

You can style the blog to match your website's design. The blog content is injected into the #blogbott.com_app div, so you can style the elements within that div using your own CSS. For an example of a site that has done this, see fullsusmtb.org/blog.

Is the BlogBott script optimized for Core Web Vitals in a Next.js app?