Build a BigCommerce headless storefront using the Catalyst framework and connect it to the GraphQL Storefront API

Steps

1. Clone or initialize a Catalyst project using the BigCommerce CLI and configure the channel ID, store hash, and Storefront API token in the project environment variables
2. Review the generated Next.js project structure and locate the BigCommerce client setup that wraps the GraphQL Storefront API endpoint; understand how the channel-specific token scopes queries to the correct channel
3. Write or extend a GraphQL query in the Catalyst query layer to fetch a product with its variants, pricing, and available options; test the query against the GraphQL Storefront API playground
4. Implement a product detail page in the Next.js app that calls the query, handles variant selection state client-side, and adds the selected variant to a cart via the REST or GraphQL Cart API
5. Configure internationalization settings in the Catalyst project if operating across multiple locales, ensuring that the storefront token and channel are localized accordingly
6. Deploy the Catalyst app to Vercel or another Next.js-compatible host and link the deployment URL as the channel's storefront URL in the BigCommerce admin