⚛️Compatibility with Next.js, Remix, Nuxt, etc.

Integrate the widget with your Next.js, Remix or Nuxt application

Next.js

LI.FI Widget is fully compatible with Next.js applications and requires minimal configuration for seamless integration.

Due to the nature of server-side rendering (SSR) in Next.js and how different wallet libraries manage their connections to wallet extensions, the LI.FI Widget needs to be specifically rendered on the client side. To achieve this, make use of the 'use client' directive, which ensures that the widget component is only rendered in the client-side environment.

Please take a look at our complete example in the widget repository here.

Let's take a look at the example of how you can add the widget to a Next.js page:

Widget.tsx

'use client';

import type { WidgetConfig } from '@lifi/widget';
import { LiFiWidget, WidgetSkeleton } from '@lifi/widget';
import { ClientOnly } from './ClientOnly';

export function Widget() {
  const config = {
    appearance: 'light',
    theme: {
      container: {
        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
        borderRadius: '16px',
      },
    },
  } as Partial<WidgetConfig>;

  return (
    <div>
      <ClientOnly fallback={<WidgetSkeleton config={config} />}>
        <LiFiWidget config={config} integrator="nextjs-example" />
      </ClientOnly>
    </div>
  );
}

ClientOnly.tsx

import { useSyncExternalStore, type PropsWithChildren } from 'react';

function subscribe() {
  return () => {};
}

/**
 * Return a boolean indicating if the JS has been hydrated already.
 * When doing Server-Side Rendering, the result will always be false.
 * When doing Client-Side Rendering, the result will always be false on the
 * first render and true from then on. Even if a new component renders it will
 * always start with true.
 */
export function useHydrated() {
  return useSyncExternalStore(
    subscribe,
    () => true,
    () => false,
  );
}

interface ClientOnlyProps extends PropsWithChildren {
  fallback?: React.ReactNode;
}

/**
 * Render the children only after the JS has loaded client-side. Use an optional
 * fallback component if the JS is not yet loaded.
 */
export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
  const hydrated = useHydrated();
  return hydrated ? children : fallback;
}

page.tsx

import { Widget } from './components/Widget';

export default function Home() {
  return (
    <main>
      <Widget />
    </main>
  );
}

Widget Skeleton

As you can see from the Next.js example, for users convenience we provide the WidgetSkeleton component that can be used as a fallback while the main widget component is being loaded.

The WidgetSkeleton component is currently only tested within the Next.js environment and might not work with other SSR frameworks.

Widget Skeleton

Remix, Nuxt, Gatsby etc.

Please check out our complete examples for Remix, Nuxt and Gatsby.

• Remix (Example)
• Nuxt.js (Example)
• Gatsby (Example)

We are continuously working on improving our support for more frameworks.

🛣️React Router Compatibility