Reflow Next.js Commerce

A Next.js 14 ecommerce template featuring:

• Built-in Reflow integration.
• Great performance thanks to Next.js server caching.
• Optional user accounts during checkout.
• Support for Edge Runtime
• Optimized SEO using Next.js's Metadata
• Easy cache revalidation with Reflow webhooks.
• Styling with Tailwind CSS
• Automatic light/dark mode based on system settings

Store Setup

The store can be configured using the environment variables found in .evn.example.

• For local development, make a copy of the .env.example file and rename it to .env.
• For serverless deployment (e.g. Vercel or Netlify) enter the environment variables during deployment configuration.

Here is a list of the available env variables:

Prop	Required	Description
SITE_NAME	Yes	The name of the website. Displayed in various places and used for metadata generation.
COMPANY_NAME	No	The name of your company. Displayed in the website footer.
NEXT_PUBLIC_REFLOW_PROJECT_ID	Yes	The ID of your Reflow project. You can obtain your project ID from the Reflow dashboard settings page.website.
NEXT_PUBLIC_REFLOW_MODE	Yes	The mode in which you wish to run this app. Either live or test. Learn more
FEATURED_PRODUCTS_CATEGORY	Yes	The ID of a category, the products of which you wish to be prominently displayed on the front page.
NAV_CATEGORIES	Yes	A comma-separated list of category IDs that will be included in the site navigation, e.g. "1111,2222,3333"
REFLOW_WEBHOOK_SIGNING_SECRET	No	If using webhook cache revalidation the signing secret is used for verifying the webhook requests. Learn more

Note: You should not commit your .env file or it will expose secrets that will allow others to control your Reflow project.

Running Locally

After setting the environment variables in the .env file locally, you can run the following command to start the development server.

npm install
npm run dev

Your app should now be running on localhost:3000.

Production Deployment

In production environments such as Vercel, the preset Next.js deployment settings should be enough to deploy the app without issues:

• Install command:npm install
• Build command: npm run build
• Development command:next
• Node version : 18.x
• Root directory: ./
• Output directory: Next.js default

Webhook Cache Revalidation

Note: Next.js cache is disabled when working in a dev environment. This section is applicable only to production builds.

This app takes advantage of Next's server side rendering and aggressive cache to offer the best possible experience to customers. Thanks to the cache, pages that have been visited are saved on the server, after which all subsequent requests are blazing fast.

The only downside is that once the site is cached, any changes in your Reflow project (e.g. adding new products) will not be reflected in your live site.

To revalidate the cache and update the Next.js website, a webhook request needs to be sent to /api/revalidate. When a webhook event with type products.changed or categories.changed is sent to this URL, the cache for pages related to the respective objects will be refreshed.

Below is an example of a successful revalidation webhook event:

Request

{
  "id": "evt_304a10e2bae97d4bd8d981657b5d31df0ac1a53f",
  "object": "event",
  "api-version": "2023-01-30",
  "created": 1708361124,
  "data": {
    "action": "create",
    "items": ["1711595600"]
  },
  "livemode": true,
  "request_id": "req_b4030f2987186dd04a0fca3c8ed716912a9752a7",
  "type": "products.changed"
}

Response

{
  "body": {
    "now": 1708361125284,
    "cache_revalidated": true
  },
  "status": 200
}

You can learn more about Reflow webhooks and how to use them for content revalidation in the docs.