Configuration

Configure your YNS storefront — environment variables, constants, and store settings.

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` 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:

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:

import { Commerce } from "commerce-kit";

export const commerce = Commerce();

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

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"):

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:

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

PreviousInstallationStorefront NextCustomizationStorefront