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 – what canonical tags, `robots.txt` and the sitemap point at. Falls back to the Vercel deployment URL, then `http://localhost:3000`.

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

One public address

A store has one public address, so search engines rank one site instead of two copies of it. That address is the custom domain once it has verified, and the free your-store.yns.store subdomain until then. Set NEXT_PUBLIC_URL to it when you deploy the storefront yourself.

On stores YNS builds and hosts, this is handled for you: each production build gets NEXT_PUBLIC_URL set to the store's current public address, and the free subdomain permanently redirects (308) to the custom domain once that domain verifies. A domain that verifies after the last publish redirects right away, but its canonical URL is baked in at the next publish. Connect and verify a domain from the admin, or with the Domain API.

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