Adding dashboards to a Next.js application

You can easily embed dashboards in your Next.js application! We have a React component LuzmoDashboardComponent 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 render 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;
  dashboardId: string;
}

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

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 { ComponentRef } from 'react';
import type { LuzmoDashboardComponent } from '@luzmo/react-embed';

interface DashboardWrapperProps {
  forwardedRef?: React.Ref<ComponentRef<typeof LuzmoDashboardComponent>>;
  authKey: string;
  authToken: string;
  dashboardId: string;
}

const LuzmoDashboardDynamic = dynamic(
  async () => {
    const { LuzmoDashboardComponent } = await import('@luzmo/react-embed');
    const Wrapper = ({ forwardedRef, ...props }: DashboardWrapperProps) => (
      <LuzmoDashboardComponent ref={forwardedRef} {...props} />
    );
    return Wrapper;
  },
  { ssr: false }
);

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