AutoReview logoAutoReview

Reviews Widget for Next.js

Add a Reviews Widget to Next.js the Right Way

Render the widget container and load the embed runtime with next/script — clean, fast, and SSR-friendly.

What it looks like on Next.js

A real AutoReview widget — exactly what your Next.js visitors will see.

How to add reviews to Next.js

In Next.js, render the AutoReview <div> and load the embed with next/script using a lazyOnload or afterInteractive strategy — no manual DOM injection needed.

  1. 1

    Add the widget container

    Render <div className="autoreview" data-widget-id="YOUR_WIDGET_ID" data-type="carousel" /> in your component or page.

  2. 2

    Load the runtime with next/script

    Add <Script src="https://cdn.getautoreview.com/v1/embed.min.js" strategy="lazyOnload" /> from next/script.

  3. 3

    Deploy

    Build and deploy — the runtime renders the widget after hydration.

<div class="autoreview"
  data-widget-id="YOUR_WIDGET_ID"
  data-type="carousel"></div>
<script src="https://cdn.getautoreview.com/v1/embed.min.js" async></script>

Good to know

  • Works in both the App Router and Pages Router; next/script handles loading order for you.
  • This very site is built on Next.js — the live widgets on these pages use exactly this approach.

Frequently asked questions

Which next/script strategy should I use?

lazyOnload is ideal for below-the-fold widgets; use afterInteractive if the widget is above the fold and you want it to load sooner.

Add reviews to your Next.js site

Collect and display reviews on autopilot — for $29/mo with a 7-day free trial.