## Environment Variables

| Variable | Required | Description |
|----------|----------|-------------|
| `YNS_API_KEY` | Yes | Your YNS API key |
| `NEXT_PUBLIC_YNS_API_TENANT` | No | Base URL of the YNS instance the storefront talks to. Set it to skip a startup round-trip; leave it unset and the storefront resolves its subdomain and public URL from [`GET /api/v1/me`](/docs/api-reference/store) instead. |
| `NEXT_PUBLIC_URL` | No | Canonical public URL of the storefront. Falls back to the Vercel deployment URL, then `http://localhost:3000`. |

Copy `.env.example` to `.env.local` to get started.

## Store Constants

The storefront uses a constants file at `lib/constants.ts` for store-wide settings:

```ts
export const LOCALE = "en-US";
export const CURRENCY = "USD";
```

Modify these to match your store's locale and currency.

## Commerce Client

The Commerce SDK is initialized in `lib/commerce.ts`:

```ts
import { Commerce } from "commerce-kit";

export const commerce = Commerce();
```

The client reads `YNS_API_KEY` from the environment automatically. To customize:

```ts
export const commerce = Commerce({
  token: process.env.YNS_API_KEY,
  endpoint: "https://custom-endpoint.example.com",
});
```

## Caching

Product pages use Next.js caching with `"use cache"` and `cacheLife("minutes")`:

```tsx
export default async function ProductPage(props) {
  "use cache";
  cacheLife("minutes");

  return <ProductDetails params={props.params} />;
}
```

This ensures product data is fresh while keeping pages fast.

## Metadata

Each page generates its own metadata for SEO. The root layout sets default metadata, and individual pages override it:

```tsx
export async function generateMetadata({ params }) {
  const product = await commerce.productGet({ idOrSlug: slug });
  return {
    title: `${product.name} - Your Next Store`,
    description: product.summary,
  };
}
```