How to Integrate Spocket with V0

Start by using V0 to generate the core UI components for your Spocket-powered storefront. This is the part where V0 shines — you can describe exactly the product display you want and get production-ready React components with Tailwind CSS in seconds. The goal in this step is to create components that expect data from API endpoints you will build in the next step, so structure your prompts around that pattern. Open V0 at v0.dev and describe your storefront layout. Be specific about the data each component needs to display — product name, price, image URL, category, inventory status. Tell V0 to fetch data from /api/spocket/products (the endpoint you will create) and to show a loading skeleton while the data loads. Also ask for proper error handling — a message when the fetch fails and an empty state when no products match the filters. For a complete storefront you will typically need: a product grid component, an individual product page, and a basic cart. You can generate each separately in V0 or ask for all of them in one detailed prompt. After V0 generates the code, review the fetch calls to confirm they target /api/spocket/products and /api/spocket/products/[id] — these are the routes you will build next. If V0 used different endpoint paths, update them in the code or ask V0 to revise with your preferred path structure.

Now you will create the Next.js API route that connects your V0-generated frontend to the Spocket REST API. This route runs on Vercel's serverless infrastructure, which means your Spocket API key never touches the browser — it lives only on the server side inside Vercel's environment. Create a new file at app/api/spocket/route.ts in your project. This file handles GET requests from your product grid component. It reads your SPOCKET_API_KEY from process.env, constructs a request to Spocket's products endpoint, and returns the data as JSON to your frontend. The route also handles pagination parameters (page and limit) so your storefront can load products in pages rather than all at once. Spocket's API uses Bearer token authentication — you include your API key in the Authorization header as 'Bearer YOUR_KEY'. The base URL for Spocket's API is https://api.spocket.co. Check the Spocket API documentation in your account dashboard for the exact endpoint paths and response shape, as Spocket occasionally updates their API version. The code below shows the standard pattern using fetch with an Authorization header and error handling. If the Spocket API returns an error status, the route propagates that error to the frontend so your UI can display an appropriate message rather than showing empty content silently.

1// app/api/spocket/route.ts
2import { NextRequest, NextResponse } from 'next/server'
3
4const SPOCKET_API_BASE = 'https://api.spocket.co'
5
6export async function GET(request: NextRequest) {
7  const apiKey = process.env.SPOCKET_API_KEY
8
9  if (!apiKey) {
10    return NextResponse.json(
11      { error: 'Spocket API key not configured' },
12      { status: 500 }
13    )
14  }
15
16  const { searchParams } = new URL(request.url)
17  const page = searchParams.get('page') ?? '1'
18  const limit = searchParams.get('limit') ?? '20'
19  const category = searchParams.get('category') ?? ''
20
21  const queryParams = new URLSearchParams({
22    page,
23    per_page: limit,
24    ...(category && { category }),
25  })
26
27  try {
28    const response = await fetch(
29      `${SPOCKET_API_BASE}/v1/products?${queryParams.toString()}`,
30      {
31        headers: {
32          Authorization: `Bearer ${apiKey}`,
33          'Content-Type': 'application/json',
34        },
35        // Cache product data for 5 minutes to reduce API calls
36        next: { revalidate: 300 },
37      }
38    )
39
40    if (!response.ok) {
41      const errorBody = await response.text()
42      console.error('Spocket API error:', response.status, errorBody)
43      return NextResponse.json(
44        { error: `Spocket API error: ${response.status}` },
45        { status: response.status }
46      )
47    }
48
49    const data = await response.json()
50    return NextResponse.json(data)
51  } catch (error) {
52    console.error('Failed to fetch from Spocket:', error)
53    return NextResponse.json(
54      { error: 'Failed to connect to Spocket API' },
55      { status: 500 }
56    )
57  }
58}

Your storefront needs individual product pages so customers can see full product details, select variants, and read descriptions before purchasing. Create a dynamic API route at app/api/spocket/[id]/route.ts that fetches a single product by its Spocket product ID. This route is called by your product detail page component, which passes the product ID from the URL. The dynamic segment [id] in the route path maps to params.id in the handler function. The route fetches the single product from Spocket's products/{id} endpoint and returns its full data including variant information, multiple images, detailed description, shipping details, and real-time inventory per variant. Product detail data typically changes less frequently than catalog data, so you can cache it for longer — 15 minutes is a reasonable default. When V0 generates the product detail page, it creates a Next.js page at app/products/[id]/page.tsx that calls this API route. The page component reads the id from params, calls /api/spocket/products/{id}, and renders the full product layout. Make sure your V0 prompt for the product detail page specifies that it should call /api/spocket/[id] and handle the case where a product is not found (404 response) by showing a 'Product not found' message with a link back to the catalog.

1// app/api/spocket/[id]/route.ts
2import { NextRequest, NextResponse } from 'next/server'
3
4const SPOCKET_API_BASE = 'https://api.spocket.co'
5
6export async function GET(
7  request: NextRequest,
8  { params }: { params: { id: string } }
9) {
10  const apiKey = process.env.SPOCKET_API_KEY
11
12  if (!apiKey) {
13    return NextResponse.json(
14      { error: 'Spocket API key not configured' },
15      { status: 500 }
16    )
17  }
18
19  try {
20    const response = await fetch(
21      `${SPOCKET_API_BASE}/v1/products/${params.id}`,
22      {
23        headers: {
24          Authorization: `Bearer ${apiKey}`,
25          'Content-Type': 'application/json',
26        },
27        next: { revalidate: 900 }, // 15 minutes
28      }
29    )
30
31    if (response.status === 404) {
32      return NextResponse.json(
33        { error: 'Product not found' },
34        { status: 404 }
35      )
36    }
37
38    if (!response.ok) {
39      return NextResponse.json(
40        { error: `Spocket API error: ${response.status}` },
41        { status: response.status }
42      )
43    }
44
45    const data = await response.json()
46    return NextResponse.json(data)
47  } catch (error) {
48    console.error('Failed to fetch product from Spocket:', error)
49    return NextResponse.json(
50      { error: 'Failed to connect to Spocket API' },
51      { status: 500 }
52    )
53  }
54}

Your Next.js API routes use process.env.SPOCKET_API_KEY to authenticate with Spocket. For local development, this value goes in a .env.local file in your project root. For production on Vercel, you add it through the Vercel Dashboard — it is never committed to your Git repository. To add the environment variable to Vercel, go to vercel.com/dashboard and open your project. Click the Settings tab at the top, then click Environment Variables in the left sidebar. In the Key field type SPOCKET_API_KEY. In the Value field paste your Spocket API key, which you can find in your Spocket account under Settings → API. Under Environment, select all three: Production, Preview, and Development. Click Save. Vercel will automatically inject this variable into your serverless functions at runtime without it ever appearing in your frontend JavaScript bundle. For local development, create a .env.local file in your project root and add SPOCKET_API_KEY=your_key_here. Make sure .env.local is listed in your .gitignore file — in a standard V0-generated Next.js project it already is. Never use the NEXT_PUBLIC_ prefix for your Spocket API key — that prefix makes the variable available to client-side code, which would expose it in your browser's JavaScript bundle. Only server-side code (API routes, Server Components, Server Actions) can access process.env.SPOCKET_API_KEY without the NEXT_PUBLIC_ prefix.

1# .env.local (for local development only — never commit this file)
2SPOCKET_API_KEY=your_spocket_api_key_here
3
4# Note: NEXT_PUBLIC_ prefix is intentionally NOT used here.
5# SPOCKET_API_KEY is server-side only and must not be exposed to the browser.

With the product catalog API routes in place and environment variables configured, deploy your project to Vercel and verify the full integration works end to end. Push your code to GitHub and Vercel will trigger an automatic build. Once deployed, open your production URL, navigate to your product catalog, and confirm that Spocket products are loading correctly with real names, prices, and images. If your storefront needs to handle customer orders — sending purchase data back to Spocket to initiate fulfillment — you will add a POST route to your API file. This route receives order data from your checkout component (customer address, selected product ID, quantity, variant) and forwards it to Spocket's orders endpoint. Spocket then routes the order to the appropriate supplier for fulfillment. The order creation route is a POST handler in the same app/api/spocket/route.ts file (or in a separate app/api/spocket/orders/route.ts if you prefer separation). It reads the order payload from the request body, validates the required fields, and sends a POST request to Spocket's API. For a production storefront, order creation should always happen after payment confirmation — use Stripe or another payment processor to confirm payment first, then call the Spocket order API in a webhook handler or server action. For complex multi-step checkout flows, RapidDev's team can help architect the full payment-to-fulfillment pipeline.

1// app/api/spocket/orders/route.ts
2import { NextRequest, NextResponse } from 'next/server'
3
4const SPOCKET_API_BASE = 'https://api.spocket.co'
5
6export async function POST(request: NextRequest) {
7  const apiKey = process.env.SPOCKET_API_KEY
8
9  if (!apiKey) {
10    return NextResponse.json(
11      { error: 'Spocket API key not configured' },
12      { status: 500 }
13    )
14  }
15
16  try {
17    const body = await request.json()
18
19    // Validate required fields
20    if (!body.products || !body.shipping_address) {
21      return NextResponse.json(
22        { error: 'Missing required fields: products and shipping_address' },
23        { status: 400 }
24      )
25    }
26
27    const response = await fetch(`${SPOCKET_API_BASE}/v1/orders`, {
28      method: 'POST',
29      headers: {
30        Authorization: `Bearer ${apiKey}`,
31        'Content-Type': 'application/json',
32      },
33      body: JSON.stringify({
34        order: {
35          line_items: body.products.map((item: {
36            product_id: string
37            variant_id: string
38            quantity: number
39          }) => ({
40            product_id: item.product_id,
41            variant_id: item.variant_id,
42            quantity: item.quantity,
43          })),
44          shipping_address: body.shipping_address,
45        },
46      }),
47    })
48
49    if (!response.ok) {
50      const errorBody = await response.json().catch(() => ({}))
51      return NextResponse.json(
52        { error: errorBody.message || `Order failed: ${response.status}` },
53        { status: response.status }
54      )
55    }
56
57    const order = await response.json()
58    return NextResponse.json({ success: true, order_id: order.id })
59  } catch (error) {
60    console.error('Failed to create Spocket order:', error)
61    return NextResponse.json(
62      { error: 'Failed to create order' },
63      { status: 500 }
64    )
65  }
66}