How to Integrate Oberlo with V0

Before building your V0 dropshipping integration, it's important to understand why Oberlo was discontinued and which modern alternative best fits your use case. Shopify shut down Oberlo on June 15, 2022, after acquiring it and deciding to consolidate dropshipping functionality. The official replacement for existing Oberlo users migrating within Shopify is DSers (dsers.com), which connects to AliExpress suppliers and maintains similar import and order management workflows. However, DSers is designed primarily for Shopify stores, and its API access for custom Next.js storefronts is limited. For custom Next.js storefront integrations, Spocket is the stronger choice — it has a documented API, focuses on vetted US and EU suppliers with faster shipping times, and provides profit margin calculations and branded invoicing features. Printful is another alternative if your focus is print-on-demand products (custom t-shirts, mugs, phone cases) rather than general dropshipping. For AliExpress-specific dropshipping outside of Shopify, the AliExpress Affiliate API and third-party tools like AutoDS are alternatives. For your V0 project, decide first whether you want curated US/EU suppliers (Spocket), AliExpress products (DSers or AutoDS), or print-on-demand (Printful), then build the corresponding API route integration. This guide proceeds with Spocket as the primary integration target, but the Next.js API route pattern is identical across all three alternatives.

Open V0 at v0.dev and describe the dropshipping storefront or admin dashboard you want to build. The most valuable V0-generated components for a dropshipping store are the product import dashboard (for browsing the supplier catalog and selecting products to sell), the customer-facing product listing page (showing your curated products at retail prices), and the order management dashboard (for tracking fulfillment). For the product import dashboard, describe an interface where you can browse supplier products with profit margin calculations displayed prominently — this is the core workflow that Oberlo made visual and approachable. For the customer storefront, describe a clean e-commerce layout that could apply to any product category. V0's strength is generating polished product cards, checkout buttons, and category navigation that look professional without custom design work. The dropshipping workflow requires your UI to show supplier-specific metadata that regular storefronts don't need: cost price (what you pay the supplier), retail price (what the customer pays), profit margin, shipping time estimate, supplier country, and supplier rating. Ask V0 to include these fields in the product import card UI specifically, since this is internal-facing and can show more business data than the customer-facing store. After generating, push to GitHub via V0's Git panel.

Create the Next.js API route that fetches Spocket supplier products and returns them to your V0-generated storefront. The Spocket API uses OAuth 2.0 or API key authentication depending on your access level — contact Spocket's partner team for API documentation and credentials since they are not publicly listed on their website. Once you have API access, the core endpoints you'll use are product search (to browse and filter the supplier catalog), product details (to get full specs and images), and import list management (to track which products you've added to your store). The product response from Spocket includes cost price (what Spocket charges you as the retailer), suggested retail price, supplier information, shipping times per destination country, and inventory levels. Your API route normalizes this data and calculates profit margin before returning it to the frontend. For the customer-facing storefront, your product data comes from your own database (where you've stored imported products with your custom descriptions and retail prices), not directly from Spocket on every request — this allows you to customize product titles and descriptions without changing Spocket's catalog data. Order fulfillment flows the other direction: when a customer places an order on your storefront, your order API route posts to Spocket's order creation endpoint to initiate fulfillment with the supplier.

1// app/api/spocket/products/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const SPOCKET_API_BASE = 'https://app.spocket.co/api';
5
6interface SpocketProduct {
7  id: string;
8  name: string;
9  description?: string;
10  images: Array<{ src: string }>;
11  variants: Array<{
12    id: string;
13    price: number; // Cost price (what you pay)
14    compare_at_price?: number; // Suggested retail
15    inventory_quantity: number;
16    sku: string;
17  }>;
18  supplier: {
19    name: string;
20    country: string;
21    rating: number;
22  };
23  shipping_time?: string;
24  processing_time?: string;
25}
26
27export async function GET(request: NextRequest) {
28  const apiKey = process.env.SPOCKET_API_KEY;
29
30  if (!apiKey) {
31    return NextResponse.json(
32      { error: 'Spocket API key not configured' },
33      { status: 500 }
34    );
35  }
36
37  const { searchParams } = new URL(request.url);
38  const page = parseInt(searchParams.get('page') ?? '1', 10);
39  const perPage = parseInt(searchParams.get('perPage') ?? '24', 10);
40  const category = searchParams.get('category') ?? '';
41  const query = searchParams.get('q') ?? '';
42
43  const params = new URLSearchParams({
44    page: page.toString(),
45    per_page: perPage.toString(),
46  });
47
48  if (category) params.set('category', category);
49  if (query) params.set('search', query);
50
51  try {
52    const response = await fetch(
53      `${SPOCKET_API_BASE}/products?${params.toString()}`,
54      {
55        headers: {
56          Authorization: `Bearer ${apiKey}`,
57          'Content-Type': 'application/json',
58          Accept: 'application/json',
59        },
60      }
61    );
62
63    if (!response.ok) {
64      throw new Error(`Spocket API error: ${response.status}`);
65    }
66
67    const data = await response.json() as {
68      products: SpocketProduct[];
69      meta: { total: number; current_page: number };
70    };
71
72    const products = (data.products ?? []).map((product) => {
73      const variant = product.variants?.[0];
74      const costPrice = variant?.price ?? 0;
75      const retailPrice = variant?.compare_at_price ?? costPrice * 2;
76      const profitMargin = retailPrice - costPrice;
77      const profitPercent = retailPrice > 0 ? Math.round((profitMargin / retailPrice) * 100) : 0;
78
79      return {
80        id: product.id,
81        name: product.name,
82        imageUrl: product.images?.[0]?.src ?? '',
83        costPrice,
84        retailPrice,
85        profitMargin,
86        profitPercent,
87        inStock: (variant?.inventory_quantity ?? 0) > 0,
88        stockQty: variant?.inventory_quantity ?? 0,
89        supplierName: product.supplier?.name ?? '',
90        supplierCountry: product.supplier?.country ?? '',
91        supplierRating: product.supplier?.rating ?? 0,
92        shippingTime: product.shipping_time ?? '7-14 days',
93        processingTime: product.processing_time ?? '1-3 days',
94      };
95    });
96
97    return NextResponse.json({
98      products,
99      total: data.meta?.total ?? products.length,
100      page,
101    });
102  } catch (error) {
103    const message = error instanceof Error ? error.message : 'Unknown error';
104    console.error('Spocket API error:', message);
105    return NextResponse.json(
106      { error: 'Failed to fetch Spocket products', details: message },
107      { status: 500 }
108    );
109  }
110}

Push your code to GitHub and configure Spocket API credentials in Vercel. Open the Vercel Dashboard, select your project, and go to Settings → Environment Variables. Add SPOCKET_API_KEY with your Spocket API access token. If Spocket uses OAuth 2.0 instead of a static API key, add SPOCKET_CLIENT_ID and SPOCKET_CLIENT_SECRET and implement the token exchange in a utility function. Neither variable should have the NEXT_PUBLIC_ prefix — all Spocket API calls should go through your server-side Next.js routes. If you are also integrating Stripe for customer payments, add your Stripe keys at the same time (STRIPE_SECRET_KEY and NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY). Set all environment variables for Production and Preview environments, save, and trigger a redeployment. After deployment, test the product import dashboard by browsing the Spocket catalog and confirming that product data loads correctly with pricing and supplier information. For your customer-facing storefront, verify that imported products display with your custom retail pricing rather than Spocket's wholesale cost price. If you need help structuring the full order flow from customer purchase through Spocket fulfillment, RapidDev's team has experience building custom dropshipping integrations with API-first platforms.