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

​

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.

If you’re using Next.js with the App Router, the following example shows how to add the widget to a page:

'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>
  );
}

If you are using Next.js with the Pages Router, you need to import the LI.FI Widget dynamically:

import dynamic from 'next/dynamic';

const LiFiWidget = dynamic(() => import('@lifi/widget').then(mod => mod.LiFiWidget), {
  ssr: false,
  loading: () => <div>Loading LI.FI Widget...</div>
});

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 (
    <LiFiWidget config={config} integrator="nextjs-example" />
  );
}

​

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.

​

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.