High-Performance Headless Storefront built with Next.js 16 + React 19 + Universal Commerce Adapter Architecture (SpurtCommerce, Medusa & Pluggable Templates)

Website • Documentation • GitHub

A modern, enterprise-grade e-commerce storefront built with Next.js 16, React 19, and Tailwind CSS. This project features a flexible adapter architecture that supports multiple commerce backends, allowing you to switch between different e-commerce platforms seamlessly.

• 🛒 Multi-Adapter Architecture - Support for multiple commerce backends (Medusa, Spurt)
• 🌍 Multi-Language Support - Built-in i18n with support for 9 languages (English, Spanish, French, German, Italian, Japanese, Chinese, Hindi, Arabic)
• 🎨 Modern UI - Built with Radix UI, Headless UI, and Material Tailwind components
• 📱 Responsive Design - Mobile-first approach with Tailwind CSS
• 🔒 Secure Authentication - Built-in auth system with JWT support
• 🛍️ Shopping Cart - Real-time cart management
• 💳 Checkout & Payment - Complete checkout flow with payment integration
• 📦 Order Management - Order history and tracking
• ❤️ Wishlist - Save favorite products
• 🏷️ Category Management - Dynamic category navigation
• 🔍 Product Search - Advanced search and filtering
• 📍 Address Management - Multiple shipping addresses support
• ⚡ Performance Optimized - Built with Next.js standalone output for optimal deployment

Before downloading and running this project, ensure you have the following installed on your system:

• Node.js: Version 18.17 or higher (Download)
• npm: Version 9.x or higher (comes with Node.js)
• Git: For cloning the repository (Download)

git clone -b main https://github.com/spurtcommerce/StoreNextjs.git
cd StoreNextjs
npm install

Create a .env file in the root directory with the following variables:

NEXT_PUBLIC_ENV='production'
NEXT_PUBLIC_IMAGE_URL="https://your-image-cdn.com/"

# Admin Authentication Credentials (Optional)
NEXT_PUBLIC_MANAGE_USERNAME="admin@yourdomain.com"
NEXT_PUBLIC_MANAGE_PASSWORD="your-secure-password"

node server.js

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

This project supports two commerce adapters, each with different capabilities:

The Spurt Adapter provides a comprehensive e-commerce experience with advanced features like product reviews, specifications, related products, and support for digital downloads. It's ideal for businesses that need a feature-rich storefront.

The Medusa Adapter offers a streamlined e-commerce experience optimized for headless commerce. It focuses on core shopping functionalities with excellent performance and scalability through the Medusa backend.

To add support for additional image URLs or CDN domains, update the next.config.mjs file:

images: {
  remotePatterns: [
    // Existing patterns...
    {
      protocol: "https",
      hostname: "your-custom-domain.com",
    },
    {
      protocol: "https",
      hostname: "*.your-cdn-provider.com", // Wildcard support
    },
    {
      protocol: "https",
      hostname: "your-s3-bucket.s3.region.amazonaws.com",
    },
    // Add more patterns as needed
  ],
  qualities: [25, 50, 75, 100],
}

{
  protocol: "https",              // Required: "http" or "https"
  hostname: "example.com",        // Required: domain name
  port: "3000",                   // Optional: specific port
  pathname: "/images/**",         // Optional: path pattern
}

After modifying next.config.mjs, restart your development server:

# Stop the server (Ctrl+C) and restart
node server.js

// AWS S3
{
  protocol: "https",
  hostname: "your-bucket.s3.amazonaws.com",
}

// Cloudfront CDN
{
  protocol: "https",
  hostname: "d123456789.cloudfront.net",
}

// Custom CDN
{
  protocol: "https",
  hostname: "cdn.yourdomain.com",
}

// Wildcard for subdomains
{
  protocol: "https",
  hostname: "*.yourdomain.com",
}

StoreNextjs/
├── adapters/           # Commerce adapter modules
│   ├── medusa/        # Medusa adapter
│   └── spurt/         # Spurt adapter
├── dist/              # Production build output
├── i18n/              # Internationalization configuration
├── messages/          # Translation files
├── public/            # Static assets
│   ├── brand/        # Brand assets (logo, etc.)
│   └── img/          # Images
├── next.config.mjs    # Next.js configuration
├── package.json       # Dependencies and scripts
└── store-config.json  # Store adapter configuration

• 🇬🇧 English (en)
• 🇪🇸 Spanish (es)
• 🇫🇷 French (fr)
• 🇩🇪 German (de)
• 🇮🇹 Italian (it)
• 🇯🇵 Japanese (ja)
• 🇨🇳 Chinese (zh)
• 🇮🇳 Hindi (hi)
• 🇸🇦 Arabic (ar)

• Framework: Next.js 16.2.10
• React: 19.2.7
• Styling: Tailwind CSS 4.3.3
• UI Components: Radix UI, Headless UI, Material Tailwind
• State Management: Redux Toolkit with Redux Persist
• Internationalization: next-intl
• HTTP Client: Axios
• Forms: React Hook Form
• Animations: Framer Motion
• Icons: React Icons, Lucide React
• Carousel: Embla Carousel, Swiper
• Notifications: React Toastify, Sonner

• Always use HTTPS in production
• Never commit .env files with sensitive credentials
• Update the default admin credentials immediately
• Keep dependencies updated regularly
• Use environment variables for sensitive data

Ensure the following environment variables are set in your production environment:

NEXT_PUBLIC_ENV=production
NEXT_PUBLIC_IMAGE_URL=https://your-cdn.com/
NEXT_PUBLIC_MANAGE_USERNAME=your-admin-username
NEXT_PUBLIC_MANAGE_PASSWORD=your-secure-password

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is private and proprietary.

For issues, questions, or contributions, please open an issue on GitHub.

Built with ❤️ using Next.js and modern web technologies