Next.js example | huddle.run

Let's see how to use huddle in a Next.js project.

Installation

To install huddle in your project, run the installation command using your favourite package manager:

pnpm add @huddlerun/react
# or
yarn add @huddlerun/react
# or
npm install @huddlerun/react

Initializing huddle

To use huddle in your project, you need to initialize it using with the frontendKey and pathname. In Next.js 13, you can get the pathname using the usePathname hook from next/navigation.

The code below creates a React Client Component using the "use client" directive to avoid rendering this component on server and initializes the component's styles.

To initialize huddle,

Create a new file HuddleClient.tsx in the ./components folder.
Copy the below code and paste it in the newly created file.
Replace the frontendKey copied from the huddle dashboard (opens in a new tab).

./app/HuddleClient.tsx

"use client";
import Huddle from "@huddlerun/react";
import "@huddlerun/react/styles.css";
import { usePathname } from "next/navigation";
 
export default function HuddleClient() {
  const pathname = usePathname();
  return <Huddle frontendKey="<copied-from-dashboard>" pathname={pathname} />;
}

Using huddle

With your HuddleClient component ready, import the component inside the app/layout.tsx file and use it within the body.

./app/layout.tsx

import React from "react";
import HuddleClient from "./HuddleClient";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head />
      <body>
        {children}
        <HuddleClient />
      </body>
    </html>
  );
}

React Support