@doswiftly/cli 0.1.19 → 0.1.20

package/templates/storefront-nextjs-shadcn/next.config.ts

@@ -1,10 +1,14 @@
 import type { NextConfig } from 'next';
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin();
 
 const nextConfig: NextConfig = {
   // Enable React strict mode for better development experience
   reactStrictMode: true,
 
-  // Image optimization configuration
+  // Image optimization — GraphQL API returns ready-to-use CDN URLs.
+  // Use url(transform: { maxWidth: 800 }) in queries. No client-side loader needed.
   images: {
     remotePatterns: [
       {
@@ -21,11 +25,8 @@ const nextConfig: NextConfig = {
         port: '8000',
       },
     ],
-    // Allow dangerous URLs for local development
     dangerouslyAllowSVG: true,
     contentDispositionType: 'attachment',
-    // Disable image optimization for local development if needed
-    unoptimized: process.env.NODE_ENV === 'development',
   },
 
   // Experimental features
@@ -44,4 +45,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withNextIntl(nextConfig);

package/templates/storefront-nextjs-shadcn/package.json

@@ -15,7 +15,7 @@
     "@doswiftly/storefront-operations": "{{STOREFRONT_OPS_VERSION}}",
     "@doswiftly/storefront-sdk": "^4.0.0",
     "@tanstack/react-query": "^5.62.0",
-    "next": "^16.0.0",
+    "next": "^16.1.7",
     "react": "^19",
     "react-dom": "^19",
     "lucide-react": "latest",
@@ -34,6 +34,7 @@
     "zustand": "^5.0.2",
     "zod": "^3.23.8",
     "sonner": "^1.7.1",
+    "next-intl": "^4.1.0",
     "next-themes": "^0.4.4",
     "react-hook-form": "^7.55.0",
     "@hookform/resolvers": "^5.2.0"
@@ -44,7 +45,7 @@
     "@graphql-typed-document-node/core": "^3.2.0",
     "graphql": "^16.10.0",
     "@next/env": "^16.0.0",
-    "@opennextjs/cloudflare": "^1.0.0",
+    "@opennextjs/cloudflare": "^1.17.1",
     "@types/node": "latest",
     "@types/react": "latest",
     "@types/react-dom": "latest",

package/templates/storefront-nextjs-shadcn/proxy.ts

@@ -1,79 +1,148 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
-import { AUTH_COOKIE_NAME, matchesRoute } from "@doswiftly/storefront-sdk";
+import createMiddleware from "next-intl/middleware";
+import { defaultLocale, localePrefix } from "@/i18n/routing";
+import {
+  AUTH_COOKIE_NAME,
+  LANGUAGE_COOKIE_NAME,
+  LANGUAGE_COOKIE_MAX_AGE,
+  matchesRoute,
+} from "@doswiftly/storefront-sdk";
 import {
   protectedRoutes,
   guestOnlyRoutes,
   redirects,
 } from "@/lib/auth/routes";
 
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+const shopSlug = process.env.NEXT_PUBLIC_SHOP_SLUG || "demo-shop";
+
 /**
- * Authentication Proxy Function (Next.js 16+)
- *
- * Security Model (3 layers):
- * 1. Proxy function (this file) - Fast redirect based on cookie existence (UX layer)
- * 2. AuthGuard component - Client-side validation via useAuth hook
- * 3. GraphQL Backend - Ultimate security (validates token on every request)
- *
- * IMPORTANT: This proxy checks cookie EXISTENCE, not VALIDITY.
- * Token validation happens in:
- * - AuthGuard (client-side via useAuth hook)
- * - GraphQL API (server-side, ultimate security)
+ * Fetch supported locales from backend (cached 60s).
+ * Backend is SSOT — merchant adds/removes language → immediately reflected.
  *
- * Why this approach?
- * - Proxy runs on Edge Runtime (fast, but limited capabilities)
- * - Cannot make GraphQL requests to validate token
- * - Provides instant redirect without waiting for client hydration
- * - Prevents flash of protected content for unauthenticated users
- *
- * @see lib/auth/routes.ts - SSOT for route configuration
- * @see components/auth/auth-guard.tsx - Client-side auth protection
+ * In-memory cache is acceptable in middleware context — warm instances benefit,
+ * cold starts make one extra backend call (graceful degradation).
  */
-export function proxy(request: NextRequest) {
+let cachedLocales: string[] | null = null;
+let cacheExpiry = 0;
+let cachedIntlMiddleware: ReturnType<typeof createMiddleware> | null = null;
+let cachedLocaleRegex: RegExp | null = null;
+
+async function getSupportedLocales(): Promise<string[]> {
+  const now = Date.now();
+  if (cachedLocales && now < cacheExpiry) {
+    return cachedLocales;
+  }
+
+  try {
+    const res = await fetch(`${apiUrl}/storefront/graphql`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Shop-Slug": shopSlug,
+      },
+      body: JSON.stringify({
+        query: `{ shop { supportedLanguages } }`,
+      }),
+    });
+    const json = await res.json();
+    const locales: string[] =
+      json?.data?.shop?.supportedLanguages?.filter(Boolean);
+
+    if (locales && locales.length > 0) {
+      cachedLocales = locales;
+      cacheExpiry = now + 60_000; // 60s cache
+      // Rebuild derived caches when locales change
+      cachedIntlMiddleware = createMiddleware({
+        locales,
+        defaultLocale,
+        localePrefix,
+        localeCookie: {
+          name: LANGUAGE_COOKIE_NAME,
+          maxAge: LANGUAGE_COOKIE_MAX_AGE,
+        },
+      });
+      cachedLocaleRegex = new RegExp(
+        `^\\/(${locales.join("|")})(\\\/|$)`
+      );
+      return locales;
+    }
+  } catch {
+    // Backend unreachable — use cached or fallback
+  }
+
+  return cachedLocales || [defaultLocale];
+}
+
+function getIntlMiddleware(locales: string[]) {
+  if (cachedIntlMiddleware) return cachedIntlMiddleware;
+  cachedIntlMiddleware = createMiddleware({
+    locales,
+    defaultLocale,
+    localePrefix,
+    localeCookie: {
+      name: LANGUAGE_COOKIE_NAME,
+      maxAge: LANGUAGE_COOKIE_MAX_AGE,
+    },
+  });
+  return cachedIntlMiddleware;
+}
+
+function getLocaleRegex(locales: string[]) {
+  if (cachedLocaleRegex) return cachedLocaleRegex;
+  cachedLocaleRegex = new RegExp(`^\\/(${locales.join("|")})(\\\/|$)`);
+  return cachedLocaleRegex;
+}
+
+export async function proxy(request: NextRequest) {
+  // Step 1: Get dynamic locales from backend
+  const locales = await getSupportedLocales();
+
+  // Step 2: next-intl locale detection & routing (cached middleware instance)
+  const handleI18nRouting = getIntlMiddleware(locales);
+  const response = handleI18nRouting(request);
+
+  // Step 3: Auth checks
   const { pathname } = request.nextUrl;
   const token = request.cookies.get(AUTH_COOKIE_NAME)?.value;
   const hasToken = Boolean(token);
 
-  // Protected routes - redirect to login if no token
-  if (matchesRoute(pathname, protectedRoutes)) {
+  // Strip locale prefix for route matching (cached regex)
+  const localePattern = getLocaleRegex(locales);
+  const localeMatch = pathname.match(localePattern);
+  const urlLocalePrefix = localeMatch ? `/${localeMatch[1]}` : "";
+  const pathnameWithoutLocale = pathname.replace(localePattern, "/");
+  const matchPathname =
+    pathnameWithoutLocale === "" ? "/" : pathnameWithoutLocale;
+
+  if (matchesRoute(matchPathname, protectedRoutes)) {
     if (!hasToken) {
-      const loginUrl = new URL(redirects.unauthenticated, request.url);
-      // Preserve the original URL for redirect after login
+      const loginUrl = new URL(
+        `${urlLocalePrefix}${redirects.unauthenticated}`,
+        request.url
+      );
       loginUrl.searchParams.set("redirect", pathname);
       return NextResponse.redirect(loginUrl);
     }
   }
 
-  // Guest-only routes - redirect to account if has token
-  if (matchesRoute(pathname, guestOnlyRoutes)) {
+  if (matchesRoute(matchPathname, guestOnlyRoutes)) {
     if (hasToken) {
       return NextResponse.redirect(
-        new URL(redirects.authenticated, request.url)
+        new URL(
+          `${urlLocalePrefix}${redirects.authenticated}`,
+          request.url
+        )
       );
     }
   }
 
-  return NextResponse.next();
+  return response;
 }
 
-/**
- * Matcher configuration
- *
- * Only run proxy on routes that need auth checks.
- * This improves performance by skipping static assets, API routes, etc.
- *
- * Update this when adding new protected or guest-only route groups.
- */
 export const config = {
   matcher: [
-    /*
-     * Match all request paths except:
-     * - _next/static (static files)
-     * - _next/image (image optimization files)
-     * - favicon.ico (favicon file)
-     * - public folder files (images, etc.)
-     * - API routes (handled separately)
-     */
-    "/((?!_next/static|_next/image|favicon.ico|.*\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+    "/((?!api|trpc|_next|_vercel|.*\\.(?:svg|png|jpg|jpeg|gif|webp|ico)$).*)",
   ],
 };

package/templates/storefront-nextjs-shadcn/stores/cart-store.ts

@@ -1,58 +1,24 @@
-import { createStore } from 'zustand/vanilla';
-import { persist } from 'zustand/middleware';
-import { createStoreContext } from '@doswiftly/storefront-sdk/react';
-
-export interface CartState {
-  // State
-  cartId: string | null;
-  isOpen: boolean;
-
-  // Actions
-  setCartId: (cartId: string | null) => void;
-  clearCart: () => void;
-  openCart: () => void;
-  closeCart: () => void;
-  toggleCart: () => void;
-}
-
-export function createCartStore() {
-  return createStore<CartState>()(
-    persist(
-      (set) => ({
-        cartId: null,
-        isOpen: false,
-
-        setCartId: (cartId: string | null) => {
-          set({ cartId });
-        },
-
-        clearCart: () => {
-          set({ cartId: null, isOpen: false });
-        },
-
-        openCart: () => {
-          set({ isOpen: true });
-        },
-
-        closeCart: () => {
-          set({ isOpen: false });
-        },
-
-        toggleCart: () => {
-          set((state) => ({ isOpen: !state.isOpen }));
-        },
-      }),
-      {
-        name: 'cart-storage',
-        // Persist only cartId — server is the source of truth for items
-        partialize: (state) => ({ cartId: state.cartId }),
-      },
-    ),
-  );
-}
-
-export const {
-  Provider: CartProvider,
-  useStore: useCartStore,
-  useApi: useCartStoreApi,
-} = createStoreContext<CartState>('CartStore');
+/**
+ * Cart store — re-export facade from SDK.
+ *
+ * All cart state management is now in @doswiftly/storefront-sdk/react.
+ * This file preserves import compatibility for existing template consumers.
+ */
+export {
+  createCartStore,
+  CartProvider,
+  useCartStore,
+  useCartStoreApi,
+  selectCartId,
+  selectIsCartOpen,
+  selectCartIsLoading,
+} from '@doswiftly/storefront-sdk/react';
+
+export type {
+  CartState,
+  CartActions,
+  CartStoreConfig,
+  CartData,
+  CartLineInput,
+  CartLineUpdateInput,
+} from '@doswiftly/storefront-sdk/react';

package/templates/storefront-nextjs-shadcn/wrangler.toml

@@ -11,3 +11,14 @@ assets = { directory = ".open-next/assets", binding = "ASSETS" }
 # Cloudflare Images binding for Next.js /_next/image optimization
 [images]
 binding = "IMAGES"
+
+# Observability — logs persisted in Cloudflare Dashboard
+[observability]
+enabled = true
+head_sampling_rate = 1
+
+[observability.logs]
+enabled = true
+head_sampling_rate = 1
+persist = true
+invocation_logs = true