> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cuprice.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> Embed Cuprice in a Next.js app

Use the built-in `Script` component for optimal loading:

```tsx theme={null}
import Script from "next/script";

export default function PricingPage() {
  return (
    <section className="py-20 px-6">
      <div data-cuprice-id="YOUR_SHARE_ID"></div>
      <Script src="https://app.cuprice.io/embed.js" strategy="lazyOnload" />
    </section>
  );
}
```

## Using environment variables

Store the Share ID in `.env.local` to keep it configurable:

```bash theme={null}
CUPRICE_SHARE_ID=nTZ7axXQHU
NEXT_PUBLIC_CUPRICE_BASE=https://cuprice.io
```

```tsx theme={null}
import Script from "next/script";

export default function PricingPage() {
  return (
    <section>
      <div data-cuprice-id={process.env.CUPRICE_SHARE_ID}></div>
      <Script
        src={`${process.env.NEXT_PUBLIC_CUPRICE_BASE}/embed.js`}
        strategy="lazyOnload"
      />
    </section>
  );
}
```

<Tip>
  `strategy="lazyOnload"` loads the script after the page is interactive — it never blocks rendering.
</Tip>