Vercel/commerce is a Next.js-based e-commerce template that provides a fully functional, customizable online store solution. It integrates with various headless commerce platforms and offers a modern, performant shopping experience out of the box.

Pros

• Highly customizable and extensible
• Built with modern technologies (Next.js, React, TypeScript)
• Seamless integration with multiple headless commerce platforms
• Excellent performance and SEO optimization

Cons

• Steep learning curve for developers unfamiliar with Next.js or React
• Limited built-in design options, requiring custom styling for unique looks
• Potential complexity in setting up and configuring third-party integrations

Code Examples

1. Fetching products using the commerce provider:

import { getProduct, getProductsList } from '@framework/product'

export const getStaticProps = async () => {
  const products = await getProductsList()
  return {
    props: { products },
  }
}

2. Adding an item to the cart:

import { useAddItem } from '@framework/cart'

const AddToCartButton = ({ productId, variantId }) => {
  const addItem = useAddItem()
  
  const handleAddToCart = async () => {
    await addItem({
      productId,
      variantId,
    })
  }

  return <button onClick={handleAddToCart}>Add to Cart</button>
}

3. Customizing the theme:

// pages/_app.tsx
import { ManagedUIContext, ThemeProvider } from '@components/ui/context'
import type { AppProps } from 'next/app'

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <ManagedUIContext>
      <ThemeProvider>
        <Component {...pageProps} />
      </ThemeProvider>
    </ManagedUIContext>
  )
}

export default MyApp

Getting Started

1. Clone the repository:

   git clone https://github.com/vercel/commerce.git
   

2. Install dependencies:

   cd commerce
   yarn
   

3. Copy the example environment file:

   cp .env.template .env.local
   

4. Update .env.local with your commerce provider's credentials.

5. Run the development server:

   yarn dev
   

6. Open http://localhost:3000 in your browser to see the store.