> ## Documentation Index
> Fetch the complete documentation index at: https://docs.li.fi/llms.txt
> Use this file to discover all available pages before exploring further.

# 与 Next.js、Remix、Nuxt 等的兼容性

> 将组件与您的 Next.js、Remix 或 Nuxt 应用程序集成

## Next.js

**LI.FI 组件** 与 Next.js 应用程序完全兼容，需要最少的配置即可无缝集成。

由于 Next.js 中服务器端渲染（SSR）的性质以及不同钱包库管理与钱包扩展连接的方式，LI.FI 组件需要在客户端专门渲染。为了实现这一点，请使用 `'use client'` 指令，确保组件仅在客户端环境中渲染。

请查看我们在组件仓库中的完整示例[这里](https://github.com/lifinance/widget/tree/main/examples)。

如果您使用带有 App Router 的 Next.js，以下示例显示如何将组件添加到页面：

<CodeGroup>
  ```typescript Widget.tsx theme={"system"}
  '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>
    );
  }
  ```

  ```typescript ClientOnly.tsx theme={"system"}
  import { useSyncExternalStore, type PropsWithChildren } from 'react';

  function subscribe() {
    return () => {};
  }

  /**
   * Return a boolean indicating if the JS has been hydrated already.
   * When doing Server-Side Rendering, the result will always be false.
   * When doing Client-Side Rendering, the result will always be false on the
   * first render and true from then on. Even if a new component renders it will
   * always start with true.
   */
  export function useHydrated() {
    return useSyncExternalStore(
      subscribe,
      () => true,
      () => false,
    );
  }

  interface ClientOnlyProps extends PropsWithChildren {
    fallback?: React.ReactNode;
  }

  /**
   * Render the children only after the JS has loaded client-side. Use an optional
   * fallback component if the JS is not yet loaded.
   */
  export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
    const hydrated = useHydrated();
    return hydrated ? children : fallback;
  }
  ```

  ```typescript page.tsx theme={"system"}
  import { Widget } from './components/Widget';

  export default function Home() {
    return (
      <main>
        <Widget />
      </main>
    );
  }
  ```
</CodeGroup>

If you are using Next.js with the Pages Router, you need to import the LI.FI Widget dynamically:

```tsx theme={"system"}
import dynamic from 'next/dynamic';

const LiFiWidget = dynamic(() => import('@lifi/widget').then(mod => mod.LiFiWidget), {
  ssr: false,
  loading: () => <div>Loading LI.FI Widget...</div>
});

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 (
    <LiFiWidget config={config} integrator="nextjs-example" />
  );
}
```

## 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.

<Note>
  The `WidgetSkeleton` component is currently only tested with中 Next.js environment and might not work with other SSR frameworks.
</Note>

<Frame caption="Widget Skeleton">
  <img src="https://mintcdn.com/lifi/EmProAEgMrruLUbI/images/widget_skeleton.gif?s=6eac36570e37135ef5108b35a3bcff7e" width="1076" height="1438" data-path="images/widget_skeleton.gif" />
</Frame>

## Remix, Nuxt, Gatsby etc.

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

* Remix ([Example](https://github.com/lifinance/widget/tree/main/examples/remix))

* Nuxt.js ([Example](https://github.com/lifinance/widget/tree/main/examples/nuxt))

* Gatsby ([Example](https://github.com/lifinance/widget/tree/main/examples))

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