Comment on page
⚛
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;
After the above, you can add the widget to a page:
index.tsx
components/Widget.tsx
components/LoadingIndicator.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;
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
export const LoadingIndicator = () => {
return (
<div
style={{
display: 'grid',
placeItems: 'center',
}}
>
<p>Loading...</p>
</div>
);
};