Next.js Integration

Setup

npm install @simplersuite/react

App Router (Server Components)

app/products/[handle]/page.tsx

import { SimplerSuiteReviewsProvider, ReviewSummary, ReviewList } from '@simplersuite/react';

export default async function ProductPage({ params }) {
  const product = await getProduct(params.handle);

  return (
    <SimplerSuiteReviewsProvider
      apiKey={process.env.SWIFTREVIEWS_API_KEY!}
      shopDomain={process.env.SHOP_DOMAIN!}
    >
      <h1>{product.title}</h1>
      <ReviewSummary productId={product.id} />
      <ReviewList productId={product.id} />
    </SimplerSuiteReviewsProvider>
  );
}

Pages Router

pages/products/[handle].tsx

export async function getServerSideProps({ params }) {
  const product = await getProduct(params.handle);
  return {
    props: {
      product,
      apiKey: process.env.SWIFTREVIEWS_API_KEY,
      shopDomain: process.env.SHOP_DOMAIN,
    },
  };
}

export default function ProductPage({ product, apiKey, shopDomain }) {
  return (
    <SimplerSuiteReviewsProvider apiKey={apiKey} shopDomain={shopDomain}>
      <ReviewSummary productId={product.id} />
      <ReviewList productId={product.id} />
    </SimplerSuiteReviewsProvider>
  );
}

Environment Variables

SWIFTREVIEWS_API_KEY=sr_your_api_key
SHOP_DOMAIN=your-store.myshopify.com