# Deploy a headless BigCommerce storefront with Vercel **Author:** Vercel --- [BigCommerce](https://www.bigcommerce.com/) is an ecommerce platform for building and managing online storefronts. This guide explains how to deploy a headless storefront using Next.js on Vercel. This guide uses [Catalyst](https://www.catalyst.dev/) by BigCommerce to connect your BigCommerce store to a Vercel deployment. Catalyst was developed by BigCommerce in collaboration with Vercel. > You can use this guide as a reference for creating a custom headless BigCommerce storefront, even if you're not using Catalyst. ## Getting started You can deploy the [Catalyst by BigCommerce template](https://vercel.com/templates/next.js/catalyst-by-bigcommerce) directly to Vercel, or use the steps below to fork and clone it locally. ## Configure BigCommerce ### 1\. Set up a BigCommerce account and storefront You can use an existing BigCommerce account and storefront, or get started with one of these options: - [Start a free trial](https://www.bigcommerce.com/start-your-trial/) - [Create a developer sandbox](https://start.bigcommerce.com/developer-sandbox/) ### 2\. Fork and clone the Catalyst repository 1. [Fork the Catalyst repository on GitHub](https://github.com/bigcommerce/catalyst/fork). You can name your fork as you prefer. This guide refers to it as ``. 2. Clone your forked repository to your local machine: `git clone /.git cd ` > Replace `` with your GitHub username and `` with the name you chose for your fork. ### 3\. Add the upstream Catalyst repository To automatically sync updates, add the BigCommerce Catalyst repository as a remote named "upstream": `git remote add upstream git@github.com:bigcommerce/catalyst.git` Verify the local repository is set up with the remote repositories: `git remote -v` The output should look similar to this: `origin git@github.com:/.git (fetch) origin git@github.com:/.git (push) upstream git@github.com:bigcommerce/catalyst.git (fetch) upstream git@github.com:bigcommerce/catalyst.git (push)` Learn more about [syncing a fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork). ### 4\. Enable Corepack and install dependencies Catalyst requires pnpm as the Node.js package manager. [Corepack](https://github.com/nodejs/corepack#readme) helps manage package manager versions. Run this command to enable Corepack, activate pnpm, and install dependencies: `corepack enable pnpm && pnpm install` ### 5\. Run the Catalyst CLI command The Catalyst CLI helps set up and configure your project. When run, it will: 1. Guide you through logging into your BigCommerce store 2. Help you create a new or select an existing Catalyst storefront Channel 3. Automatically create an `.env.local` file in your project root Run the following command: `pnpm create @bigcommerce/catalyst@latest init` Follow the CLI prompts to complete the setup. ### 6\. Start the development server After setting up your project and configuring the environment variables, start the development server from your project root: `pnpm dev` Your local storefront should now be accessible at `http://localhost:3000`. ## Deploy to Vercel Now that your Catalyst storefront is configured, deploy your project to Vercel. ### 1\. Create a new Vercel project Visit [https://vercel.com/new](https://vercel.com/new) to create a new project. You may be prompted to sign in or create a new account. 1. Find your forked repository in the list. 2. Click the **Import** button next to your repository. 3. In the **Root Directory** section, click the **Edit** button. 4. Select the `core` directory from the file tree. Click **Continue** to confirm your selection. 5. Verify that the Framework preset is set to Next.js. If it isn't, select it from the dropdown menu. 6. Open the **Environment Variables** dropdown and paste the contents of your `.env.local` into the form. 7. Click the **Deploy** button to start the deployment process. ### 2\. Link your Vercel project To link your local development environment with your Vercel project, install the Vercel CLI globally: `pnpm i -g vercel` Then link your local project to your Vercel project: `vercel link` Learn more about the [Vercel CLI](https://vercel.com/docs/cli). ## Enable Vercel Remote Cache Vercel Remote Cache optimizes your build process by sharing build outputs across your team, eliminating redundant tasks. ### 1\. Authenticate with Turborepo Run this command to authenticate the Turborepo CLI with your Vercel account: `pnpm dlx turbo login` For SSO-enabled Vercel teams, include your team slug: `pnpm dlx turbo login --sso-team=team-slug` ### 2\. Link your Remote Cache To link your project to a team scope and specify who the cache should be shared with: `pnpm dlx turbo link` > If the team owner has disabled Remote Caching, Turborepo will display: "Please contact your account owner to enable Remote Caching on Vercel." ### 3\. Add Remote Cache Signature Key To securely sign artifacts before uploading them to the Remote Cache, add the `TURBO_REMOTE_CACHE_SIGNATURE_KEY` environment variable to your Vercel project: `vercel env add TURBO_REMOTE_CACHE_SIGNATURE_KEY` When prompted, add the environment variable to Production, Preview, and Development environments. Set the value to a secure random string by running `openssl rand -hex 32` in your terminal. Pull the new environment variable into your local project: `vercel env pull` Learn more about [Vercel Remote Cache](https://vercel.com/docs/monorepos/remote-caching#vercel-remote-cache). ## Enable Web Analytics and Speed Insights The Catalyst monorepo comes pre-configured with Vercel Web Analytics and Speed Insights. These tools help you understand and optimize your storefront's performance. - [Web Analytics](https://vercel.com/docs/analytics) provides real-time insights into your site's traffic and user behavior. - [Speed Insights](https://vercel.com/docs/speed-insights) offers detailed performance metrics and suggestions to optimize your site's loading speed. ## Next steps For more advanced configurations, refer to the [BigCommerce Catalyst documentation](https://catalyst.dev/docs). --- [View full KB sitemap](/kb/sitemap.md)