Skip to main content
The Hey Chocolate Next.js integration provides server components, client hooks, and edge-optimized data fetching.

​
Installation

npm install @heychocolate/nextjs

​
Setup

Add the provider to your root layout: 
// app/layout.tsx
import { HeyChocolateProvider } from '@heychocolate/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <HeyChocolateProvider apiKey={process.env.HEYCHOCOLATE_API_KEY}>
          {children}
        </HeyChocolateProvider>
      </body>
    </html>
  );
}

​
Server Components

Fetch sustainability data on the server for optimal performance: 
// app/products/[id]/page.tsx
import { getProduct, getProductImpact } from '@heychocolate/nextjs/server';

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

  return (
    <div>
      <h1>{product.name}</h1>
      <p>CO2: {impact.co2Equivalent} kg CO2e</p>
      <p>{impact.equivalencies[0].description}: {impact.equivalencies[0].value}</p>
    </div>
  );
}

​
Client Hooks

Use hooks for interactive features: 
'use client';

import { useProduct, useImpactCalculation, useCartImpact } from '@heychocolate/nextjs';

function ImpactCalculator({ productId }) {
  const { product } = useProduct(productId);
  const { calculate, result } = useImpactCalculation();

  return (
    <div>
      <h2>{product?.name}</h2>
      <button onClick={() => calculate({ productId, quantity: 100 })}>
        Calculate
      </button>
      {result && <p>Impact: {result.co2Equivalent} kg CO2e</p>}
    </div>
  );
}

​
Edge caching

Product impact data is automatically cached at the edge with a 1-hour TTL: 
// This data is edge-cached automatically
const product = await getProduct(params.id, {
  cache: 'force-cache',
  next: { revalidate: 3600 },
});

​
Components

All React SDK components are available: 
import { CarbonBadge, ComparisonTable, SupplyChainViewer } from '@heychocolate/nextjs';

<CarbonBadge productId="prod_abc123" variant="detailed" />
<ComparisonTable productIds={["prod_abc123", "prod_def456"]} />
<SupplyChainViewer productId="prod_abc123" />

​
Environment variables

HEYCHOCOLATE_API_KEY=sk_live_your_key
NEXT_PUBLIC_HEYCHOCOLATE_API_KEY=sk_live_readonly_key
Use HEYCHOCOLATE_API_KEY for server-side requests and NEXT_PUBLIC_HEYCHOCOLATE_API_KEY (read-only) for client components.