vercel-commerce

KO | EN

gitlite — search

#ai #llm #golang #rust #deep-learning #docker #nodejs #java #awesome #pytorch #ios #mcp #openai #open-source

vercel-commerce

(★ 15)

No description available.

vercel-commerce Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Next.js x Fourthwall

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FFourthwallHQ%2Fvercel-commerce)

Launch your Fourthwall storefront as a high-perfomance, server-rendered Next.js App Router ecommerce application.

⚡️ [Live Demo](https://fw-commerce.vercel.app)

📚 [API docs](https://docs.fourthwall.com/storefront)

## Getting started

There are a few prerequisites to get started with Fourthwall's Storefront API.

1. [Set up a store](https://fourthwall.com/get-started) on Fourthwall.

2. [Make some products](https://my-shop.fourthwall.com/admin/dashboard/products/all/) and [create a collection](https://my-shop.fourthwall.com/admin/dashboard/products/collections/).

3. After you have signed up, [get a storefront token](https://my-shop.fourthwall.com/admin/dashboard/settings/for-developers).

4. Fill out the environment variables below in .env.local.

```bash
NEXT_PUBLIC_FW_STOREFRONT_TOKEN="<your storefront token>" # Example: ptkn_...

NEXT_PUBLIC_FW_CHECKOUT="<your store url>" # Example: vercel-shop.fourthwall.com. Used for checkout
NEXT_PUBLIC_VERCEL_URL="<the url of your vercel site>" # Example: fw-commerce.vercel.app. This is used for sitemap.xml + robots.txt.

# Optional
NEXT_PUBLIC_FW_COLLECTION="<the handle of your collection>" # If you want to display a specific collection. See Resources for more details on how to get the collection handle.
FOURTHWALL_WEBHOOK_SECRET="<a secure random string>" # Required for Fourthwall webhook cache invalidation. See ISR section below.
```

## Develop locally

You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env.local` file is all that is necessary.

> Note: You should not commit your `.env.local` file or it will expose secrets that will allow others to use your Fourthwall store.

1. Install Vercel CLI: `npm i -g vercel`
2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
3. Download your environment variables: `vercel env pull`

```bash
pnpm install
pnpm dev
```

Your app should now be running on [localhost:3000](http://localhost:3000/).

## Deploying

After cloning the repo with the Deploy with Vercel button above, you will need to set the environment variables.

```bash
git clone _your repo_ # your repo that you set up with Deploy with Vercel

vercel # From your repo directory. Links to your project

vercel # Initializes the project
vercel env add NEXT_PUBLIC_FW_COLLECTION
vercel env add NEXT_PUBLIC_FW_STOREFRONT_TOKEN
vercel env add NEXT_PUBLIC_FW_CHECKOUT
vercel env add NEXT_PUBLIC_VERCEL_URL

vercel --prod # Deploys to production
```

## Image Optimization

By default, this template uses Vercel's Image Optimization. To use Fourthwall's built-in image optimization instead, set:

```bash
NEXT_PUBLIC_USE_FW_IMAGE_OPTIMIZATION="true"
```

## Incremental Static Regeneration (ISR)

This template uses ISR to cache pages at the edge for fast load times while keeping content fresh.

### How it works

- **URL structure**: Currency is part of the URL path (`/USD/product/my-product`, `/EUR/collections/all`) rather than a query parameter. This enables full page caching since each currency variant is a separate cached page.
- **Automatic revalidation**: Product and collection pages are cached and automatically revalidated every hour (`revalidate = 3600`).
- **Home page**: Pre-built at deploy time for USD, EUR, GBP, and CAD currencies.
- **Product/Collection pages**: Built on-demand on first request, then cached.
- **Cart**: Fetched client-side to keep product pages fully static.

### On-demand revalidation via Fourthwall Webhooks

For automatic cache invalidation when products or collections change in Fourthwall, configure the webhook endpoint.

**Setup:**

1. Set the `FOURTHWALL_WEBHOOK_SECRET` environment variable to a secure random string
2. In your Fourthwall dashboard, configure a webhook subscription pointing to:
   ```
   https://your-site.com/api/webhooks/fourthwall
   ```
3. Subscribe to the following events:
   - `PRODUCT_CREATED`
   - `PRODUCT_UPDATED`
   - `COLLECTION_UPDATED`

**How it works:**

When a product or collection is updated in Fourthwall, a webhook is sent to your endpoint. The endpoint:

1. Verifies the HMAC-SHA256 signature using `FOURTHWALL_WEBHOOK_SECRET`
2. Extracts the product/collection slug from the payload
3. Calls `revalidateTag()` with the appropriate tag (`product-{slug}` or `collection-{slug}`)

**Security:**

The webhook endpoint uses HMAC-SHA256 signature verification. Fourthwall signs each webhook payload with your secret, and the endpoint verifies this signature before processing. This prevents unauthorized cache invalidation requests.

**Response examples:**

```json
// Success
{ "revalidated": true, "tags": ["product-my-product"], "timestamp": 1705123456789 }

// Invalid signature
{ "error": "Invalid signature" }

// Missing configuration
{ "error": "Missing webhook secret configuration" }
```

## Analytics

This template supports multiple analytics platforms via GTM. Analytics configuration is **automatically fetched** from your Fourthwall store at:

```
<NEXT_PUBLIC_FW_CHECKOUT>/platform/analytics.json
```

This means tracking IDs configured in your Fourthwall dashboard are automatically used—no need to duplicate them in environment variables.

### How it works

1. On page load, the app fetches analytics config from your Fourthwall store
2. The response is cached for 1 hour (ISR)
3. GTM reads the `window.*` variables to fire the appropriate tracking tags

### Fallback configuration

If the analytics endpoint is unavailable, you can set fallback values via environment variables.

These environment variables are only used if:
- The fetch to `/platform/analytics.json` fails
- A specific provider returns `null` in the response

## Resources

* How to get your [collection handle](https://docs.fourthwall.com/storefront/collection).
* [Style your store](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/) for the [checkout flow](https://docs.fourthwall.com/storefront/checkout).

vercel-commerce

vercel-commerce Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

vercel-commerce

vercel-commerce Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README