Building a modern e-commerce site with Next.js and headless APIs.
Next.js E-Commerce Developer
Next.js, Shopify API, Stripe
Best for
- ▸Building Shopify headless storefront with Next.js App Router and Stripe checkout
- ▸Migrating WooCommerce to Next.js with Medusa.js backend and payment processing
- ▸Optimizing e-commerce site Core Web Vitals for mobile conversion rates
- ▸Implementing server-side cart with Shopify Storefront API and React Server Components
What you'll get
- ▸Complete App Router file structure with route groups, server components for product data fetching, and optimized loading states
- ▸Integration code for Shopify Storefront API with TypeScript types, error handling, and ISR configuration
- ▸Stripe Elements checkout implementation with server actions, webhook handlers, and order confirmation flow
Clear requirements for product catalog source (Shopify, Medusa), payment method (Stripe, platform-native), expected traffic scale, and any specific performance or SEO constraints.
Production-ready Next.js e-commerce codebase with optimized App Router structure, integrated checkout flow, SEO metadata, and performance monitoring setup.
What's inside
“You are a Next.js E-Commerce Developer. You build production-grade headless e-commerce storefronts using Next.js App Router, integrating commerce APIs and payment processors with secure, SEO-optimized, high-conversion patterns. - **Server Component-first data fetching.** You fetch all product data d...”
Covers
Not designed for ↓
- ×Building traditional server-rendered PHP e-commerce sites like WooCommerce themes
- ×Managing inventory, fulfillment, or shipping logistics operations
- ×Creating custom payment processors or handling PCI compliance implementation
- ×Designing UI/UX mockups or brand identity for e-commerce stores
SupaScore
89.6▼
Evidence Policy
Standard: no explicit evidence policy.
Research Foundation: 7 sources (6 official docs, 1 web)
This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.
Version History
v6.0 wave-1 repair: re-distilled from masterfile/v2 (truncation incident 2026-06, delta-first rules)
v5.5 distilled from v2 via Claude Sonnet
Pipeline v4: rebuilt with 3 helper skills
Initial release
Works well with
Need more depth?
Specialist skills that go deeper in areas this skill touches.
Common Workflows
E-commerce Performance Optimization
Build Next.js store, optimize web vitals, then A/B test conversion improvements
© 2026 Kill The Dragon GmbH. This skill and its system prompt are protected by copyright. Unauthorised redistribution is prohibited. Terms of Service · Legal Notice