skills.rest
spree
spreeOFFICIAL
Explore all skills by this author →
Website𝕏@spreecommerceGitHub

spree-storefront

Develop and customize Spree's Next.js storefront with @spree/sdk integration.

4|Updated Jun 9, 2026
Search Tags:#API integration#Next.js#SDK#storefront development#Spree Commerce
One-click install
npx skills add https://github.com/spree/agent-skills --skill spree-storefront
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spree-storefront
Source: https://github.com/spree/agent-skills/tree/main/skills/spree-storefront
Command: npx skills add https://github.com/spree/agent-skills --skill spree-storefront

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @spree/sdk, next, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill unit provides a structured approach to working with Spree's Next.js storefront, simplifying the customization, API integration, and development of the frontend user experience.

Core Features & Use Cases

  • Frontend Customization: Offers guidelines and tools for modifying the storefront's layout, styling, and behavior.
  • API Integration: Facilitates seamless interaction with Spree's backend through the Store API using @spree/sdk.
  • Use Case: Streamline the process of fetching products, handling checkout flows, and customizing the cart for your Next.js storefront.

Quick Start

Initialize your Spree storefront development environment by forking the official storefront repository and integrating the @spree/sdk client for API calls.

Frequently Asked Questions about spree-storefront

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate the Spree Commerce backend with a Next.js storefront?▼

To integrate Spree Commerce with a Next.js storefront, use the @spree/sdk client to interact with the Store API. This Skill provides architecture guidelines and best practices for connecting the frontend to the backend.

What is the best way to fetch products and handle checkout flows in a Next.js Spree storefront?▼

The best way to handle checkout flows and fetch products in a Spree Next.js storefront is by leveraging the @spree/sdk for API calls. This Skill streamlines fetching products and customizing the cart.

Do I need a running Spree backend instance to develop a Next.js storefront?▼

Yes, a running Spree backend instance is required. This Skill is designed to integrate your Next.js frontend with the backend, requiring Next.js, @spree/sdk, and an active Spree backend instance.

Can I customize the layout and styling of my Spree Next.js storefront?▼

Yes, you can customize your Next.js storefront layout, styling, and behavior using the provided architecture guidelines. The Skill offers structured approaches and scripts for modifying the frontend user experience.

Related Skills

Explore More Software Engineering Skills→
spreespree
4

spree-resource

Generate Spree models, migrations, and API endpoints with Rails generators.

Official
Intermediate
forcedotcomforcedotcom
803

creating-b2b-commerce-store

Create Salesforce Commerce B2B Stores and retrieve storefront metadata via sf project retrieve start.

Official
Intermediate
nonputtipongnonputtipong

frontend-developer

Develop React components and responsive layouts with Next.js and TypeScript.

Community
Advanced
fulfonfulfon

shopify-expert

Develop Shopify themes, headless storefronts, apps, and checkout customizations.

Community
Advanced