⚛
Next.js Compatibility
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.// 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;