DocsDeveloper SectionOverall System Architecture

Enterprise Headless Architecture

The Loomix Commerce platform is built on a high-performance Headless Decoupled architecture. This decoupled design provides maximum scalability, enterprise security, lightning speed, and complete separation of concerns between frontend presentation and backend services.

1. Frontend (Next.js 16 App Router)

Shopper user interface with React Server Components, multilingual i18n, dynamic rendering of Loomix Blocks, and instant caching with Revalidation.

2. E-Commerce Engine (Medusa v2)

Management of product catalogs, variants, regional pricing, carts, order registration workflows, SMS OTP, and local shipping.

3. Content Management (Strapi CMS)

Management of page layouts, banners, blogs, footer/header menus, product option translations, and real-time webhook systems.

4. Loomix Blocks Ecosystem

Pre-designed visual blocks synced from the Loomix Registry via Strapi Admin Storefront UI and GitHub CI/CD, dynamically rendered by BlockRenderer.

Data Fetching and Rendering Flow in Next.js

Fetch main page layout and dynamic blocks from Strapi CMS
Fetch regional prices and catalog from Medusa 2.0 Engine
Query Meilisearch directly for filters and colors
Dynamic rendering of Strapi blocks to Loomix Blocks components

How to combine Strapi and Medusa data in Next.js 16

typescript

const homepageData = await getHomepageData();
const region = await getRegion(countryCode);
const searchResults = await queryMeilisearch({ color: "Red", price_range: [10, 50] });
 
return (
  <main>
    {homepageData.blocks.map((block, index) => (
      <BlockRenderer 
        key={block.id} 
        block={block} 
        region={region} 
        countryCode={countryCode} 
      />
    ))}
  </main>
);

Token Network and Environment Variables Security (.env)

.env.example

bash

# Public Service URLs
STOREFRONT_PUBLIC_URL=https://yourdomain.com
STRAPI_PUBLIC_URL=https://cms.yourdomain.com
MEDUSA_BACKEND_PUBLIC_URL=https://api.yourdomain.com
 
# Strapi CMS Access Tokens
STRAPI_API_TOKEN_FOR_MEDUSA=your_strapi_full_access_token
STRAPI_API_TOKEN_FOR_FRONT=your_strapi_read_only_token
 
# Medusa & Search Public Keys
MEDUSA_PUBLISHABLE_KEY=pk_your_medusa_publishable_key
MEILI_SEARCH_KEY=your_meilisearch_search_api_key
 
# Email (SMTP) and SMS Services
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASS=your-app-password
SMTP_FROM_ADDRESS=noreply@yourdomain.com
SMS_API_KEY=your_sms_api_key