⚛️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:

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

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.

Remix, Nuxt, Gatsby etc.

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

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

🛣️React Router Compatibility

Last updated