Adding dashboards to a Next.js application

You can easily embed dashboards in your Next.js application! We have a React component that makes this process a breeze!

Some of the libraries currently used in our frontend component are only supported client-side, while Next.js by default tries to renders page content server-side.

You can specify that a file needs to be rendered client side by adding the 'use client' declaration at the top. You can see an example of that here and make sure to check out this blogpost with an example implementation using Clerk and Vercel as well!

'use client';

import { LuzmoDashboardComponent } from '@luzmo/react-embed';

interface Props {
  authKey: string;
  authToken: string;
  dashboard: string;
}

export default function LuzmoDashboard({ dashboard }: Props) {
  return (
    <>
      <LuzmoDashboardComponent
        authKey={authKey}
        authToken={authToken}
        dashboardId={dashboard}
      ></LuzmoDashboardComponent>
    </>
  );
}

Alternatively, you could use Nextjs' dynamic import with no Server-Side Rendering (SSR) to import the React component.

An example for Next.js JavaScript pages can be seen in this Stackblitz example

For Next.js TypeScript pages, you can use the following code to import the React Luzmo component:

import dynamic from 'next/dynamic';

import type { LuzmoDashboard } from "@luzmo/react-embed";

interface IWrappedComponent {
  forwardedRef: Ref<LuzmoDashboard>;
};

const DashboardComponent = dynamic(
  async () => {
    const { LuzmoDashboardComponent } = await import("@luzmo/react-embed");
    const LuzmoDashboardComp = ({ forwardedRef, ...props }: IWrappedComponent & LuzmoDashboard) => (
      <LuzmoDashboardComponent ref={forwardedRef} {...props} />
    );
    return LuzmoDashboardComp;
  },
  {
    ssr: false,
  }
);

export default function Home() {
  return (
    <div>
      ...
      <DashboardComponent 
        authKey="<  Embed key >" 
        authToken="<  Embed token >" 
        dashboardId="< dashboard ID >" 
      />
      ...
    </div>
  );
}