⚛️Next.js Compatibility

Integrate the widget with your Next.js application

LI.FI Widget is compatible with Next.js via Dynamic Import. While we work hard to improve SSR support, below you can find an example of how to use the widget today.

Configure next.config.js as follows:

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  transpilePackages: ['@lifi/widget', '@lifi/wallet-management'],
};

module.exports = nextConfig;

Please check out our complete example in the widget repository here.

After the above, you can add the widget to a page:

index.tsx

import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import { LoadingIndicator } from '../components/LoadingIndicator';

export const LiFiWidgetNext = dynamic(
  () => import('../components/Widget').then((module) => module.Widget) as any,
  {
    ssr: false,
    loading: () => <LoadingIndicator />,
  },
);

const Home: NextPage = () => {
  return <LiFiWidgetNext />;
};

export default Home;

components/Widget.tsx

import { LiFiWidget } from '@lifi/widget';

export const Widget = () => {
  return (
    <LiFiWidget
      config={{
        containerStyle: {
          border: `1px solid rgb(234, 234, 234)`,
          borderRadius: '16px',
        },
      }}
      integrator="nextjs-example"
    />
  );
};

components/LoadingIndicator.tsx

// components/LoadingIndicator.tsx
export const LoadingIndicator = () => {
  return (
    <div
      style={{
        display: 'grid',
        placeItems: 'center',
      }}
    >
      <p>Loading...</p>
    </div>
  );
};