How to Integrate Serpstat with V0

Open V0 at v0.dev and describe the SEO reporting interface you want to build. Serpstat data maps well to standard analytics dashboard patterns — metric cards for summary KPIs, data tables for keyword lists, and line/bar charts for trend data. The key SEO metrics to display are search volume, keyword difficulty (KD as a 0-100 score), estimated organic traffic, keyword position in search results, and visibility score. V0 generates data table components with sorting and filtering very well — for a keyword research table with 50+ rows, describe column headers explicitly (Keyword, Volume, KD, CPC, Position, Traffic), the sort behavior, and any color coding you want for difficulty scores (green/yellow/red thresholds are standard in SEO tools). For chart components, describe the data structure — a line chart for traffic over time needs x-axis dates and y-axis traffic values, while a bar chart for keyword position distribution needs position buckets (1-3, 4-10, 11-20) and keyword counts. V0 uses Recharts by default for chart components, which works well for the kinds of SEO trend charts Serpstat data supports. For the domain overview section, describe a summary card grid with large numbers and trend indicators (up/down arrows with percentage change). After generating the UI, use V0's Git panel to push to GitHub.

Create the Next.js API routes that proxy requests to Serpstat's API v4 and return normalized SEO data to your dashboard. The Serpstat API v4 uses a single endpoint (https://api.serpstat.com/v4) and differentiates requests by the 'method' field in the JSON body. The key methods for an SEO dashboard are: SerpstatDomainProcedure.getDomainInfo for domain summary metrics, SerpstatDomainProcedure.getDomainKeywords for the domain's ranked keywords, SerpstatKeywordProcedure.getKeywordsInfo for research on specific keywords, and SerpstatLinksProcedure.getDomainLinks for backlink data. All requests include your API token in the JSON body. The API response wraps data in a result object with a data array and a summary count. Error responses use HTTP 200 with an error field in the JSON body, similar to Slack's pattern. Serpstat's API has rate limits tied to your subscription plan — the free plan allows 30 requests per day, while paid plans offer 100-1000 requests per day depending on the tier. For a dashboard with multiple data sections (domain overview, keywords, backlinks, competitors), batch your API calls efficiently — make only the calls needed for the current view and cache results to avoid redundant requests. The keyword difficulty score in Serpstat (KD) ranges from 0 to 100, where 0 is easiest to rank for and 100 is most competitive. The visibility score for domains represents a percentage of possible organic traffic captured.

1// app/api/serpstat/domain/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const SERPSTAT_API_URL = 'https://api.serpstat.com/v4';
5
6async function callSerpstat(method: string, params: Record<string, unknown>, token: string) {
7  const response = await fetch(SERPSTAT_API_URL, {
8    method: 'POST',
9    headers: {
10      'Content-Type': 'application/json',
11    },
12    body: JSON.stringify({
13      id: 1,
14      method,
15      params: { ...params, token },
16    }),
17  });
18
19  if (!response.ok) {
20    throw new Error(`Serpstat HTTP error: ${response.status}`);
21  }
22
23  const data = await response.json() as {
24    result?: { data: unknown; summary?: unknown };
25    error?: { code: number; message: string };
26  };
27
28  if (data.error) {
29    throw new Error(`Serpstat API error: ${data.error.message} (code ${data.error.code})`);
30  }
31
32  return data.result;
33}
34
35export async function GET(request: NextRequest) {
36  const token = process.env.SERPSTAT_API_TOKEN;
37
38  if (!token) {
39    return NextResponse.json(
40      { error: 'Serpstat API token not configured' },
41      { status: 500 }
42    );
43  }
44
45  const { searchParams } = new URL(request.url);
46  const domain = searchParams.get('domain');
47  const se = searchParams.get('se') ?? 'g_us'; // Default: Google US
48
49  if (!domain) {
50    return NextResponse.json({ error: 'domain parameter is required' }, { status: 400 });
51  }
52
53  try {
54    // Fetch domain overview and top keywords in parallel
55    const [domainInfo, domainKeywords] = await Promise.all([
56      callSerpstat('SerpstatDomainProcedure.getDomainInfo', { domain, se }, token),
57      callSerpstat(
58        'SerpstatDomainProcedure.getDomainKeywords',
59        { domain, se, size: 10, sort: { traffic: 'desc' } },
60        token
61      ),
62    ]);
63
64    const info = (domainInfo as { data: Record<string, unknown> })?.data as Record<string, unknown> ?? {};
65    const keywords = ((domainKeywords as { data: unknown[] })?.data ?? []) as Array<Record<string, unknown>>;
66
67    return NextResponse.json({
68      domain,
69      overview: {
70        organicKeywords: info.keywords ?? 0,
71        organicTraffic: info.traff ?? 0,
72        visibilityScore: info.visible ?? 0,
73        domainRank: info.domain_rank ?? 0,
74        backlinks: info.total_backlinks ?? 0,
75      },
76      topKeywords: keywords.map((kw) => ({
77        keyword: kw.keyword,
78        position: kw.position,
79        volume: kw.regional_popularity ?? kw.popularity ?? 0,
80        traffic: kw.traff ?? 0,
81        difficulty: kw.difficulty ?? 0,
82        url: kw.url,
83      })),
84    });
85  } catch (error) {
86    const message = error instanceof Error ? error.message : 'Unknown error';
87    console.error('Serpstat API error:', message);
88    return NextResponse.json(
89      { error: 'Failed to fetch Serpstat data', details: message },
90      { status: 500 }
91    );
92  }
93}

Create a second Next.js API route specifically for keyword research functionality. While the domain API route fetches data for a specific domain, the keyword research route accepts a seed keyword and returns related keyword suggestions with search volume, difficulty, CPC, and competition data. This is the most commonly used Serpstat feature for content planning — you input a topic keyword and get back a list of related keywords ranked by search volume, helping identify which variations to target in your content. The Serpstat method for keyword research is SerpstatKeywordProcedure.getKeywordsInfo for a single keyword's metrics, or SerpstatKeywordProcedure.getKeywordsWithSamePhrase for finding related keywords that contain the seed phrase. Both methods accept the keyword text, a search engine identifier (g_us for Google US, g_uk for Google UK, etc.), and optional size/sort parameters. The response includes each keyword's monthly search volume (regional_popularity), keyword difficulty score (difficulty on a 0-100 scale), cost-per-click in USD (cost), and competition level (concurrency). For an agency SEO dashboard with multiple clients, consider adding a caching layer — Serpstat keyword data for established keywords changes slowly, so caching responses for 24 hours with Next.js fetch revalidation is appropriate. For complex multi-client SEO dashboards, RapidDev can help architect efficient Serpstat API call batching to stay within rate limits.

1// app/api/serpstat/keywords/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const SERPSTAT_API_URL = 'https://api.serpstat.com/v4';
5
6export async function GET(request: NextRequest) {
7  const token = process.env.SERPSTAT_API_TOKEN;
8
9  if (!token) {
10    return NextResponse.json(
11      { error: 'Serpstat API token not configured' },
12      { status: 500 }
13    );
14  }
15
16  const { searchParams } = new URL(request.url);
17  const query = searchParams.get('q');
18  const se = searchParams.get('se') ?? 'g_us';
19  const size = parseInt(searchParams.get('size') ?? '50', 10);
20
21  if (!query) {
22    return NextResponse.json({ error: 'q parameter is required' }, { status: 400 });
23  }
24
25  try {
26    const response = await fetch(SERPSTAT_API_URL, {
27      method: 'POST',
28      headers: { 'Content-Type': 'application/json' },
29      body: JSON.stringify({
30        id: 1,
31        method: 'SerpstatKeywordProcedure.getKeywordsWithSamePhrase',
32        params: {
33          keyword: query,
34          se,
35          size,
36          sort: { regional_popularity: 'desc' },
37          token,
38        },
39      }),
40      next: { revalidate: 86400 }, // Cache for 24 hours
41    });
42
43    const data = await response.json() as {
44      result?: { data: Array<Record<string, unknown>>; summary?: unknown };
45      error?: { message: string };
46    };
47
48    if (data.error) {
49      throw new Error(data.error.message);
50    }
51
52    const keywords = (data.result?.data ?? []).map((kw) => ({
53      keyword: kw.keyword as string,
54      volume: (kw.regional_popularity as number) ?? (kw.popularity as number) ?? 0,
55      difficulty: (kw.difficulty as number) ?? 0,
56      cpc: typeof kw.cost === 'number' ? kw.cost.toFixed(2) : '0.00',
57      competition: (kw.concurrency as number) ?? 0,
58      results: (kw.serp_info as number) ?? 0,
59    }));
60
61    return NextResponse.json({ keywords, total: keywords.length, query, se });
62  } catch (error) {
63    const message = error instanceof Error ? error.message : 'Unknown error';
64    console.error('Serpstat keywords error:', message);
65    return NextResponse.json(
66      { error: 'Failed to fetch keywords', details: message },
67      { status: 500 }
68    );
69  }
70}

Push your code to GitHub and configure your Serpstat API token in Vercel. Open the Vercel Dashboard, select your project, and navigate to Settings → Environment Variables. Add SERPSTAT_API_TOKEN with your Serpstat API token from your account settings. The token should not have the NEXT_PUBLIC_ prefix since all Serpstat API calls happen server-side through your Next.js routes. If you want the dashboard to support multiple search engines and countries (Serpstat supports Google US, UK, DE, AU and many more), you can add SERPSTAT_DEFAULT_SE with a value like g_us as a default. Set environment variables for Production and Preview environments, save, and trigger a redeployment from the Deployments tab. After deployment, test the SEO dashboard by opening your Vercel URL, entering a domain you want to analyze (like your own domain or a competitor), and verifying that the organic keyword count, traffic estimate, and top keywords load correctly. Test the keyword research tool by searching for a common keyword and confirming that the results table shows correct volume, difficulty, and CPC data. If API calls fail with error code 100 (invalid token) or error code 7 (quota exceeded), double-check your SERPSTAT_API_TOKEN value and verify your plan's daily API call limit in your Serpstat account settings.