How to Integrate Magento with V0

Open V0 at v0.dev and describe the e-commerce components you want to build. Magento data maps well to standard e-commerce patterns — product listings, category navigation, product detail pages, and cart management. The key advantage of V0 for headless Magento is that you can describe exactly the UX you want without being constrained by Magento's Luma theme or PWA Studio defaults. Be specific about product card layouts, filter sidebar behavior, variant selectors (size/color pickers for configurable products), and cart drawer animation. Magento product objects include fields like name, sku, price, special_price (sale price), media_gallery_entries (images), extension_attributes (stock status), and custom_attributes (any configurable attributes your store has defined). Describe these fields to V0 so it generates components with the right data bindings. For the product listing page, mention that you want ISR-compatible rendering — the page component fetches products server-side rather than client-side, which works with Next.js ISR for fast, cacheable responses. For the cart, describe a slide-in drawer pattern that persists cart state in localStorage (or a cookie) and syncs with Magento's cart API. After generating, push to GitHub via V0's Git panel and connect to Vercel.

Create the Next.js API routes that authenticate with Magento and fetch product catalog data. Magento's REST API uses bearer token authentication — for admin operations like fetching the full catalog, you use an Integration access token generated in the Magento admin. For customer-specific operations (cart, orders), you generate a customer token by calling the customer token endpoint with the customer's email and password credentials. For a headless storefront, the most common pattern is using the Integration token server-side for all catalog operations (since these are public data) and handling customer authentication separately through your Next.js auth layer. The Magento product search endpoint (GET /rest/V1/products) supports complex filtering using searchCriteria parameters — you can filter by category, price range, attribute values, and text search using a URL query string format that Magento parses into its search framework. Product responses include all configured attributes, images, pricing rules, and stock information. The response is paginated with total_count for building pagination controls. For configurable products (products with size/color variants), additional calls to /rest/V1/configurable-products/{sku}/options and /rest/V1/configurable-products/{sku}/children fetch the variant options and child product SKUs.

1// app/api/magento/products/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const MAGENTO_BASE_URL = process.env.MAGENTO_BASE_URL;
5const MAGENTO_TOKEN = process.env.MAGENTO_INTEGRATION_TOKEN;
6
7interface MagentoProduct {
8  id: number;
9  sku: string;
10  name: string;
11  price: number;
12  status: number;
13  type_id: string;
14  media_gallery_entries?: Array<{ file: string; position: number; disabled: boolean }>;
15  custom_attributes?: Array<{ attribute_code: string; value: string }>;
16  extension_attributes?: { stock_item?: { qty: number; is_in_stock: boolean } };
17}
18
19function getMagentoImageUrl(baseUrl: string, file: string) {
20  return `${baseUrl}/pub/media/catalog/product${file}`;
21}
22
23export async function GET(request: NextRequest) {
24  if (!MAGENTO_BASE_URL || !MAGENTO_TOKEN) {
25    return NextResponse.json(
26      { error: 'Magento is not configured' },
27      { status: 500 }
28    );
29  }
30
31  const { searchParams } = new URL(request.url);
32  const page = parseInt(searchParams.get('page') ?? '1', 10);
33  const pageSize = parseInt(searchParams.get('pageSize') ?? '20', 10);
34  const categoryId = searchParams.get('categoryId') ?? '';
35  const searchQuery = searchParams.get('q') ?? '';
36
37  // Build Magento searchCriteria query parameters
38  const params = new URLSearchParams({
39    'searchCriteria[currentPage]': page.toString(),
40    'searchCriteria[pageSize]': pageSize.toString(),
41    'searchCriteria[filter_groups][0][filters][0][field]': 'status',
42    'searchCriteria[filter_groups][0][filters][0][value]': '1',
43    'searchCriteria[filter_groups][0][filters][0][condition_type]': 'eq',
44    fields:
45      'items[id,sku,name,price,extension_attributes,media_gallery_entries,custom_attributes],total_count',
46  });
47
48  if (categoryId) {
49    params.set('searchCriteria[filter_groups][1][filters][0][field]', 'category_id');
50    params.set('searchCriteria[filter_groups][1][filters][0][value]', categoryId);
51    params.set('searchCriteria[filter_groups][1][filters][0][condition_type]', 'eq');
52  }
53
54  if (searchQuery) {
55    params.set('searchCriteria[filter_groups][2][filters][0][field]', 'name');
56    params.set('searchCriteria[filter_groups][2][filters][0][value]', `%${searchQuery}%`);
57    params.set('searchCriteria[filter_groups][2][filters][0][condition_type]', 'like');
58  }
59
60  try {
61    const response = await fetch(
62      `${MAGENTO_BASE_URL}/rest/V1/products?${params.toString()}`,
63      {
64        headers: {
65          Authorization: `Bearer ${MAGENTO_TOKEN}`,
66          'Content-Type': 'application/json',
67        },
68        next: { revalidate: 300 }, // Cache for 5 minutes
69      }
70    );
71
72    if (!response.ok) {
73      throw new Error(`Magento API error: ${response.status}`);
74    }
75
76    const data = await response.json() as { items: MagentoProduct[]; total_count: number };
77
78    const products = (data.items ?? []).map((item) => {
79      const salePrice = item.custom_attributes?.find(
80        (a) => a.attribute_code === 'special_price'
81      )?.value;
82
83      const image = item.media_gallery_entries?.find((e) => !e.disabled && e.position === 1);
84
85      return {
86        id: item.id,
87        sku: item.sku,
88        name: item.name,
89        price: item.price,
90        salePrice: salePrice ? parseFloat(salePrice) : null,
91        imageUrl: image ? getMagentoImageUrl(MAGENTO_BASE_URL!, image.file) : null,
92        inStock: item.extension_attributes?.stock_item?.is_in_stock ?? true,
93        stockQty: item.extension_attributes?.stock_item?.qty ?? 0,
94      };
95    });
96
97    return NextResponse.json({
98      products,
99      totalCount: data.total_count,
100      page,
101      pageSize,
102    });
103  } catch (error) {
104    const message = error instanceof Error ? error.message : 'Unknown error';
105    console.error('Magento API error:', message);
106    return NextResponse.json(
107      { error: 'Failed to fetch products', details: message },
108      { status: 500 }
109    );
110  }
111}

Create the cart API routes that handle add-to-cart, update quantity, and checkout operations. Magento supports two cart types: guest carts (for anonymous shoppers) and customer carts (for authenticated customers). For a public storefront, start with guest carts — the flow is to create a cart (POST /rest/V1/guest-carts which returns a cart ID token), then add items to the cart using that token (POST /rest/V1/guest-carts/{cartId}/items). Store the cart ID in a browser cookie or localStorage so it persists across page loads. The cart ID is not sensitive data, but treat it with reasonable care since anyone with the cart ID can access and modify that cart. For the cart display, GET /rest/V1/guest-carts/{cartId} returns the full cart with items, quantities, prices, and totals. For checkout, the Magento REST API supports a complete checkout flow including shipping address collection, shipping method estimation, payment information submission, and order placement. For most V0 storefront projects, a simplified flow that directs customers to the Magento checkout page (at your Magento store URL) after adding items to the cart is the fastest path to a working checkout — deep Next.js checkout integration with Magento requires implementing the full checkout API sequence which is complex to build and test correctly. The cart REST API also supports coupon code application (PUT /rest/V1/guest-carts/{cartId}/coupons/{couponCode}) for promotion codes.

Push your code to GitHub and configure Magento credentials in Vercel. Open the Vercel Dashboard, select your project, and navigate to Settings → Environment Variables. Add MAGENTO_BASE_URL with your Magento store's base URL (without a trailing slash, e.g., https://your-magento-store.com), and MAGENTO_INTEGRATION_TOKEN with the Integration access token from Magento's admin panel (System → Integrations → your integration → Access Token). Neither variable should have the NEXT_PUBLIC_ prefix — Magento API calls should always be server-side to protect your integration token and avoid CORS issues. If you need the Magento URL accessible in client-side code (for image URLs), you can expose only the base URL as NEXT_PUBLIC_MAGENTO_BASE_URL since it's not sensitive. After adding environment variables for Production (and Preview if you want to test against a staging Magento instance), save and redeploy. Verify the deployment by opening your Vercel URL and checking that the product catalog loads from Magento. If you see CORS errors, confirm that all API calls are going through your Next.js API routes and not directly from the browser to Magento. Magento's REST API may need to have CORS configured if you're calling it from the client side, but the Next.js API route pattern avoids CORS entirely.