Skip to main content

Next.js

What is Next.js?​

Next.js is a powerful React-based web development framework that enables developers to build fast, scalable, and user-friendly web applications with ease. Developed and maintained by Vercel, it extends the capabilities of React by offering key features out of the box.

Key Features of Next.js​

  1. Hybrid Rendering (SSR & SSG):

    Supports both Server-Side Rendering (SSR) and Static Site Generation (SSG), giving developers flexibility in how pages are rendered.

  2. API Routes:

    Create backend endpoints directly within the app using API routes, avoiding the need for a separate backend server.

  3. Image Optimization:

    Built-in image component (next/image) automatically optimizes images for faster loading.

  4. File-based Routing:

    Pages are defined by the file structure in the pages/ directory, making navigation intuitive and scalable.

  5. Fast Refresh & Hot Reloading:

    Enables instant feedback during development.

  6. Built-in CSS & Sass Support:

    Easily import and manage styles without additional configuration.

  7. Incremental Static Regeneration (ISR):

    Allows static pages to be updated after deployment without rebuilding the entire site.

  8. Middleware & Edge Functions:

    Advanced control over request handling with minimal latency via Vercel Edge Network.

Why Use Next.js?​

  • Excellent performance and SEO support (thanks to SSR/SSG)
  • Developer-friendly with minimal setup
  • Scales well for both small projects and enterprise applications
  • Strong integration with Vercel’s deployment and CDN ecosystem

Common Use Cases​

  • Marketing websites & landing pages
  • E-commerce platforms
  • Content-heavy blogs or news sites
  • SaaS dashboards and applications
  • JAMstack architecture applications

Next.js is ideal for teams and developers looking to build modern, performant, and scalable web applications quickly with React.

BluBuddy Widget Integration with Next.js​

Prerequisites

Before starting, ensure:

  • You have a running Next.js project.
  • Node.js and npm installed on your system.

Step-by-Step Installation​

Install the BluBuddy Package

Navigate to your project folder and install the BluBuddy widget package:

cd your-nextjs-project
npm i "@blubuddy.io/widget"

For Next.js 13+ (App Router)​

If you're using the App Router (Next.js 13 and above), add the component to your root layout:

// src/app/ChatbotComponent.tsx
"use client";
import { Chatbot } from "@blubuddy.io/widget";
import "@blubuddy.io/widget/styles";

const ChatbotComponent = () => {
  return <Chatbot botId="YOUR_CHATBOT_ID" />;
};

export default ChatbotComponent;
// app/layout.jsx or app/layout.tsx
import dynamic from "next/dynamic";

// Dynamically import the chatbot to avoid SSR issues
const ChatbotComponent = dynamic(() => import("@/app/ChatbotComponent"), {
  ssr: false,
});

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ChatbotComponent />
      </body>
    </html>
  );
}

Alternatively, you can add it to a specific page:

// app/page.js or any specific page
import dynamic from "next/dynamic";

const ChatbotComponent = dynamic(() => import("@/app/ChatbotComponent"), {
  ssr: false,
});

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to our website</h1>
      {/* Your page content */}
      <ChatbotComponent />
    </div>
  );
}

For Next.js 12 and Below (Pages Router)​

If you're using the Pages Router (Next.js 12 and below), add the component to your _app.js:

// src/pages/ChatbotComponent.tsx
import { Chatbot } from "@blubuddy.io/widget";
import "@blubuddy.io/widget/styles";

const ChatbotComponent = () => {
  return <Chatbot botId="YOUR_CHATBOT_ID" />;
};

export default ChatbotComponent;
// pages/_app.jsx or pages/_app.tsx
import dynamic from "next/dynamic";
import "../styles/globals.css";

// Dynamically import the chatbot to avoid SSR issues
const ChatbotComponent = dynamic(() => import("@/pages/ChatbotComponent"), {
  ssr: false,
});

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <ChatbotComponent />
    </>
  );
}

export default MyApp;

Or add it to specific pages:

// pages/index.jsx or any specific page
import dynamic from "next/dynamic";

const ChatbotComponent = dynamic(() => import("@/pages/ChatbotComponent"), {
  ssr: false,
});

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to our website</h1>
      {/* Your page content */}
      <ChatbotComponent />
    </div>
  );
}

Important Notes:​

  • Replace "YOUR_CHATBOT_ID" with your actual bot ID from BluBuddy dashboard
  • The "use client" directive is required for the component (especially important in App Router)
  • Always use dynamic import with { ssr: false } to prevent server-side rendering issues

Step 4: Run and Verify

Use the following command to run your project locally:

npm run dev

Or if using Yarn:

yarn dev

Open your browser and go to http://localhost:3000. You should see the BluBuddy chatbot widget appear and be ready to interact with your visitors.

Troubleshooting Tips​

  • Component not appearing: Make sure you installed the package correctly: npm i "@blubuddy.io/widget"
  • SSR errors: Ensure you're using dynamic import with { ssr: false } to disable server-side rendering
  • Bot ID issues: Verify you're using the correct bot ID from your BluBuddy dashboard
  • Import path errors: Check that your import path matches your file structure:
    • App Router: @/app/ChatbotComponent
    • Pages Router: @/components/ChatbotComponent
  • "use client" directive: Make sure the chatbot component has "use client" at the top

Why Use Dynamic Import?​

The dynamic import with { ssr: false } is crucial for Next.js because:

  • The BluBuddy widget needs browser APIs that aren't available during server-side rendering
  • It prevents hydration mismatches between server and client
  • Ensures the component only loads on the client side