> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heychocolate.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> Integrate Hey Chocolate sustainability data into your Next.js application.
The Hey Chocolate Next.js integration provides server components, client hooks, and edge-optimized data fetching.
## Installation
```bash theme={null}
npm install @heychocolate/nextjs
```
## Setup
Add the provider to your root layout:
```tsx theme={null}
// app/layout.tsx
import { HeyChocolateProvider } from '@heychocolate/nextjs';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
## Server Components
Fetch sustainability data on the server for optimal performance:
```tsx theme={null}
// 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 (
);
}
```
## Client Hooks
Use hooks for interactive features:
```tsx theme={null}
'use client';
import { useProduct, useImpactCalculation, useCartImpact } from '@heychocolate/nextjs';
function ImpactCalculator({ productId }) {
const { product } = useProduct(productId);
const { calculate, result } = useImpactCalculation();
return (
{product?.name}
{result &&
Impact: {result.co2Equivalent} kg CO2e
}
);
}
```
## Edge caching
Product impact data is automatically cached at the edge with a 1-hour TTL:
```tsx theme={null}
// 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:
```tsx theme={null}
import { CarbonBadge, ComparisonTable, SupplyChainViewer } from '@heychocolate/nextjs';
```
## Environment variables
```env theme={null}
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.