Next.js Compatibility

Search…

⚛

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.
Install next-transpile-modules package and configure next.config.js as follows:
// next.config.js
​
const withTM = require('next-transpile-modules')(['@lifi/widget']);
​
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}
​
// Please declare withTM as your last plugin (the outermost one)
module.exports = withTM(nextConfig);
After the above, you can add the widget to a page:
// index.tsx
​
import type { LiFiWidget } from '@lifi/widget';
import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
​
const LiFiWidgetDynamic = dynamic(
  () => import('@lifi/widget').then((module) => module.LiFiWidget) as any,
  {
    ssr: false,
  },
) as typeof LiFiWidget;
​
const Home: NextPage = () => {
  return (
    <LiFiWidgetDynamic
      config={{
        containerStyle: {
          width: 392,
          height: 640,
          border: `1px solid rgb(234, 234, 234)`,
          borderRadius: '16px',
          display: 'flex',
          maxWidth: 392,
        },
      }}
    />
  );
};
​
export default Home;
​
Please check out our complete example in the widget repository here.

INTEGRATE LI.FI WIDGET - Previous

Wallet Management

Next - INTEGRATE LI.FI WIDGET

React Router Compatibility

Last modified 26d ago

Copy link