# Add testimonials to a Next.js site

> Collect and show customer testimonials in Next.js with SiteBackend - a small component, next/script, and support for client-side navigation and static export.

Source: https://sitebackend.com/docs/testimonials/nextjs · Updated: 2026-10-11

Add SiteBackend testimonials to a Next.js site with a placeholder `div` and one script. It works with the App Router and the Pages Router, and with `output: "export"`, because everything loads in the visitor's browser.

Get the IDs from your site's **Testimonials** tab in the dashboard: **Collect** for the form customers fill in (`c_…`), and **Widgets** for the wall, carousel, highlight or badge that shows approved ones (`w_…`).

## Load the script once

Add it to the root layout with `next/script`, so every page can use widgets:

```tsx title="app/layout.tsx"
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://sitebackend.com/widget.js" strategy="lazyOnload" />
      </body>
    </html>
  );
}
```

`lazyOnload` loads the script during browser idle time after the page's resources have loaded. The widget may appear later on a busy page. With the Pages Router, put the same `Script` in `pages/_app.tsx`.

## Add a component

```tsx title="components/testimonials.tsx"
export function Testimonials({ id }: { id: string }) {
  return <div data-sitebackend-widget={id} />;
}
```

It's a Server Component; it doesn't need `"use client"`. Use it anywhere:

```tsx title="app/page.tsx"
import { Testimonials } from "@/components/testimonials";

export default function Home() {
  return (
    <main>
      <h2>What our customers say</h2>
      <Testimonials id="w_YOUR_WIDGET_ID" />

      <h2>Leave a testimonial</h2>
      <Testimonials id="c_YOUR_COLLECT_ID" />
    </main>
  );
}
```

## Client-side navigation

When a visitor follows a `Link`, Next.js changes the page without reloading it. The script notices widgets on the new page and loads them, so you don't need to do anything.

## Local development

Widgets work on `http://localhost:3000` even when your site has a **domain** set in the dashboard: `http://localhost` and `http://127.0.0.1` are allowed on any port. The SiteBackend dashboard preview is also allowed. Preview or staging addresses on other domains are blocked. See [sites](https://sitebackend.com/docs/getting-started/sites).

For a contact form on the same site, see [add a contact form to a Next.js site](https://sitebackend.com/docs/forms/nextjs).