Next.js Integration

Add FeedValue to your Next.js application.

Installation

bash

npm install @feedvalue/react

App Router (Next.js 13+)

Add the widget to your root layout:

tsx

// app/layout.tsx
import { FeedValueWidget } from '@feedvalue/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <FeedValueWidget widgetId="wgt_abc123" />
      </body>
    </html>
  );
}

Pages Router

Add to _app.tsx:

tsx

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { FeedValueWidget } from '@feedvalue/react';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <FeedValueWidget widgetId="wgt_abc123" />
    </>
  );
}

Script Tag Alternative

If you prefer the script tag approach:

tsx

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.feedvalue.com/widget.js"
          data-widget-id="wgt_abc123"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Server Components Compatibility

The FeedValue component is a client component. In App Router, it works seamlessly alongside server components.

tsx

// app/feedback/page.tsx
import { FeedValueWidget } from '@feedvalue/react';

export default function FeedbackPage() {
  // This is a server component
  return (
    <div>
      <h1>We'd love your feedback!</h1>
      {/* Client component renders correctly */}
      <FeedValueWidget widgetId="wgt_abc123" />
    </div>
  );
}

Environment Variables

Store your widget ID securely:

env

# .env.local
NEXT_PUBLIC_FEEDVALUE_WIDGET_ID=wgt_abc123

tsx

<FeedValueWidget
  widgetId={process.env.NEXT_PUBLIC_FEEDVALUE_WIDGET_ID!}
/>

TIP

Use strategy="lazyOnload" with the Script component for best performance.

Next.js Integration ​

Installation ​

App Router (Next.js 13+) ​

Pages Router ​

Script Tag Alternative ​

Server Components Compatibility ​