create-cartbase 0.1.14 → 0.1.16

package/template/app/next.config.ts

@@ -5,10 +5,12 @@ const nextConfig: NextConfig = {
   // build transpiles it.
   transpilePackages: ["@cartbase/storefront"],
   images: {
-    // Product images come from the Cartbase media CDN and, until you
-    // allowlist your own hosts under remotePatterns, from anywhere the
-    // catalog points. Tighten this when the media domain is known.
-    unoptimized: true,
+    // Product pictures live on the Cartbase media CDN and Next resizes them
+    // on this project, per device, in the modern formats. A picture from
+    // any other host renders as it is: the package's image components
+    // switch resizing off for hosts not listed here. Add your own hosts to
+    // resize them too.
+    remotePatterns: [{ protocol: "https", hostname: "cartbase.cloud" }],
   },
   // The Cartbase store API ships NO CORS headers — browser-side SDK calls
   // must be same-origin. Proxy them through the app origin (the browser

package/template/app/package.json

@@ -9,7 +9,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@cartbase/storefront": "^0.15.0",
+    "@cartbase/storefront": "^0.17.0",
     "next": "16.2.4",
     "react": "19.2.4",
     "react-dom": "19.2.4"

package/template/app/src/app/products/[handle]/page.tsx

@@ -13,10 +13,12 @@ import { getServerClient } from "@/lib/server-client"
  */
 export default async function ProductPage({
   params,
+  searchParams,
 }: {
   params: Promise<{ handle: string }>
+  searchParams: Promise<{ variant?: string }>
 }) {
-  const { handle } = await params
+  const [{ handle }, { variant }] = await Promise.all([params, searchParams])
   const client = await getServerClient()
 
   let product
@@ -34,6 +36,12 @@ export default async function ProductPage({
       product={product}
       pricingContext={PRICING_CONTEXT}
       addToCart={addToCartAction}
+      // The product page contract: the address names the variant
+      // (`?variant=<digits>`, Shopify's parameter), and the page hands it to
+      // the template so the FIRST paint is that variant's price, code and
+      // stock. Switching a variant rewrites the address in the browser
+      // without asking the server.
+      initialVariantId={variant}
       // NO `promises` here, deliberately. Until 0.13.0 the library carried
       // delivery, exchange and return promises as label DEFAULTS, so every
       // store scaffolded from this file told shoppers "your package will