How to Integrate Pixabay API with V0

Start in V0 by crafting a prompt that describes your gallery component in detail. The Pixabay API returns image objects with fields including previewURL (small thumbnail), webformatURL (medium display size), largeImageURL (full resolution), tags (comma-separated keywords), user (photographer name), views, and downloads. Your V0 prompt should reference these fields so the generated component knows what data to display. A well-designed gallery needs a search input, a loading state (skeleton cards or spinner), an error state, a results grid with proper image aspect ratios, and pagination or infinite scroll. V0 can generate all of these in one prompt if you are specific. After V0 generates the component, push it to GitHub via the Git panel and let Vercel auto-deploy. The component will show empty/mock state until the API route is connected.

Create a Next.js API route that receives search parameters from your gallery component and forwards the request to the Pixabay API with your secret API key appended. The Pixabay API is at https://pixabay.com/api/ for images and https://pixabay.com/api/videos/ for videos. It accepts query parameters including q (search query), image_type (photo, illustration, vector, all), category, colors, orientation, per_page (max 200, default 20), and page. The key parameter is your API key. One important note about Pixabay API: the total hits field is capped at 500 results regardless of the real total. This means your pagination should stop at page ceil(500 / per_page). Build this limit into the component to avoid showing a Next Page button when no more results exist. The route below handles both image and video searches with a single endpoint.

1import { NextRequest, NextResponse } from 'next/server';
2
3const PIXABAY_API_BASE = 'https://pixabay.com/api';
4
5export async function GET(request: NextRequest) {
6  const apiKey = process.env.PIXABAY_API_KEY;
7  if (!apiKey) {
8    return NextResponse.json({ error: 'Pixabay API key not configured' }, { status: 500 });
9  }
10
11  const { searchParams } = new URL(request.url);
12  const q = searchParams.get('q') ?? '';
13  const imageType = searchParams.get('image_type') ?? 'all';
14  const category = searchParams.get('category') ?? '';
15  const orientation = searchParams.get('orientation') ?? 'all';
16  const perPage = Math.min(parseInt(searchParams.get('per_page') ?? '21', 10), 200);
17  const page = Math.max(parseInt(searchParams.get('page') ?? '1', 10), 1);
18  const mediaType = searchParams.get('media_type') ?? 'images'; // 'images' or 'videos'
19
20  const baseUrl = mediaType === 'videos'
21    ? `${PIXABAY_API_BASE}/videos/`
22    : `${PIXABAY_API_BASE}/`;
23
24  const params = new URLSearchParams({
25    key: apiKey,
26    q,
27    image_type: imageType,
28    orientation,
29    per_page: perPage.toString(),
30    page: page.toString(),
31    safesearch: 'true',
32    lang: 'en',
33  });
34
35  if (category) params.append('category', category);
36
37  try {
38    const response = await fetch(`${baseUrl}?${params.toString()}`);
39
40    if (!response.ok) {
41      return NextResponse.json(
42        { error: `Pixabay API error: ${response.status}` },
43        { status: response.status }
44      );
45    }
46
47    const data = await response.json();
48    return NextResponse.json(data, {
49      headers: {
50        'Cache-Control': 's-maxage=300, stale-while-revalidate=600',
51      },
52    });
53  } catch (error) {
54    console.error('Pixabay API route error:', error);
55    return NextResponse.json({ error: 'Failed to fetch from Pixabay' }, { status: 500 });
56  }
57}

Register for a free Pixabay account at pixabay.com if you have not already, then navigate to pixabay.com/api/docs/ while logged in to find your personal API key at the top of the page. The key is a string of numbers. Add it to Vercel as an environment variable: open your Vercel project dashboard, go to Settings → Environment Variables, click Add New, set the name as PIXABAY_API_KEY, paste your key as the value, and select Production and Preview environments. For local development, create or update your .env.local file with PIXABAY_API_KEY=your_key. After saving in Vercel, trigger a new deployment from the Deployments tab (or push a small code change to trigger auto-deploy). The Pixabay API has rate limits of 100 requests per minute and 5,000 requests per hour for free accounts. These limits are generous for a personal or small-team tool, but if you expect high traffic you should implement response caching (as shown in the API route above).

1# .env.local (do NOT commit — add to .gitignore)
2PIXABAY_API_KEY=your_pixabay_api_key_here

Update your V0-generated gallery component to fetch from /api/pixabay and render the returned image data. The key challenge with Pixabay images in Next.js is configuring the allowed image domains in next.config.js. Pixabay serves images from cdn.pixabay.com — you need to add this hostname to the Next.js Image component's allowed domains. Without this, you will see 'Invalid src prop' errors when using the Next.js Image component with Pixabay URLs. The alternative is using standard img tags (which do not have domain restrictions), but Next.js Image is strongly recommended for performance. The component should also add proper attribution links as required by Pixabay's terms — show the photographer's name with a link to the pageURL field returned by the API. For complex gallery layouts or attribution management in multi-user tools, RapidDev's team can help build the full implementation.

1// next.config.js — allow Pixabay CDN images
2/** @type {import('next').NextConfig} */
3const nextConfig = {
4  images: {
5    remotePatterns: [
6      {
7        protocol: 'https',
8        hostname: 'cdn.pixabay.com',
9      },
10      {
11        protocol: 'https',
12        hostname: 'pixabay.com',
13      },
14    ],
15  },
16};
17
18module.exports = nextConfig;