Configuration

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

Environment Variables

The storefront requires a single environment variable:

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,
  };
}