Yotpo on a Next.js E-Commerce Application

When building a modern e-commerce experience, social proof is one of the most important signals for both customers and search engines. Product reviews not only influence buying decisions but also enhance visibility in search results when properly exposed with structured data.

Step 1: Yotpo Configuration in Next.js

To start, we configured Yotpo in our Next.js application by setting up environment variables in next.config.js. This allowed us to securely store and access API credentials without hardcoding them into the repo.

// next.config.js
module.exports = {  env: {
    YOTPO_API_KEY: process.env.YOTPO_API_KEY,
    YOTPO_APP_KEY: process.env.YOTPO_APP_KEY,
  },
};

This setup gave us flexibility to manage different keys for development, staging, and production environments.

Step 2: Fetching Review Data via the Yotpo API

Yotpo provides a “Bottom Line” endpoint that returns total reviews and the average rating for a given product. We leveraged this endpoint to dynamically pull the data.

Endpoint Reference: Get Bottom Line – Total Reviews and Average Score

Example fetch in Next.js (using API routes):

export default async function handler(req, res) {
  const { productId } = req.query;
  const response = await fetch(
    `https://api.yotpo.com/products/${process.env.YOTPO_APP_KEY}/${productId}/bottomline`,
    {
      headers: {
        Authorization: `Bearer ${process.env.YOTPO_API_KEY}`,
      },
    }
  );
  const data = await response.json();
  res.status(200).json(data);
}

This gave us structured data like:

{
  "bottomline": {
    "average_score": 4.7,
    "total_reviews": 132
  }
}

Step 3: Adding Review Data to JSON-LD

The most important SEO step was exposing this data to search engines via structured data. We added the Yotpo review data into the product’s JSON-LD schema so that Google could display product ratings in search results.

Example:

const productSchema = {
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": product.name,
  "image": product.image,
  "description": product.description,
  "sku": product.sku,
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": bottomline.average_score,
    "reviewCount": bottomline.total_reviews
  }
};

Injected into the page with:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }}
/>

Results

By combining Yotpo’s verified review data with schema.org AggregateRating, we provided search engines with exactly what they need to show rich snippets—star ratings, review counts, and trust signals—directly in search results.

This approach improved product visibility and click-through rates while maintaining clean separation between frontend code, API keys, and SEO data.