How to Integrate Google Search Console with V0

Before writing any code, you need to create a Google service account that your Next.js API route will use to authenticate with the Search Console API. A service account is a special Google account that belongs to your application rather than a human user — it has its own credentials and can be granted specific permissions without requiring user login. Go to console.cloud.google.com and either select an existing Google Cloud project or create a new one. In the left sidebar, navigate to APIs & Services → Library and search for 'Google Search Console API'. Click it and click Enable. Next, navigate to APIs & Services → Credentials. Click Create Credentials → Service Account. Give it a descriptive name like 'search-console-reader' and click Create and Continue. For the role, you can skip the optional role assignment at this step — click Done. Back on the Credentials page, find your new service account in the Service Accounts list and click its email address. Go to the Keys tab and click Add Key → Create New Key. Choose JSON format and click Create. A JSON file will download to your computer — this contains your service account's private key. Store this file securely and never commit it to Git. Finally, grant the service account access to your Search Console property. Go to search.google.com/search-console, click the settings gear → Users and permissions → Add User. Enter the service account's email address (which looks like name@project-id.iam.gserviceaccount.com), set the permission to 'Restricted' or 'Full', and click Add. The service account can now read data from your Search Console property.

The service account JSON key file contains sensitive credentials including a private key. You should never commit this file to your Git repository. Instead, you will extract the necessary values and store them as Vercel environment variables, then reference them in your API route. Open the downloaded service account JSON file in a text editor. It contains several fields, but you need these three: client_email (the service account's email address), private_key (the long RSA private key starting with -----BEGIN PRIVATE KEY-----), and project_id. The private_key value contains literal newline characters represented as \n in the JSON — you need to preserve these exactly when copying the value. In Vercel, go to your project → Settings → Environment Variables. Add three variables: GOOGLE_SERVICE_ACCOUNT_EMAIL set to the client_email value, GOOGLE_PRIVATE_KEY set to the entire private_key value (including the -----BEGIN PRIVATE KEY----- and -----END PRIVATE KEY----- lines and all the \n characters), and GOOGLE_SITE_URL set to your Search Console property URL (exactly as it appears in Search Console — e.g., https://www.yoursite.com or sc-domain:yoursite.com for domain properties). Set all three to Production, Preview, and Development environments. For local development, add the same three variables to your .env.local file. When adding the private key to .env.local, wrap the entire value in double quotes to preserve the \n newline sequences. The googleapis library handles converting \n back to actual newlines when parsing the key.

1# .env.local (for local development — never commit this file)
2GOOGLE_SERVICE_ACCOUNT_EMAIL=your-service-account@your-project.iam.gserviceaccount.com
3GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYOUR_PRIVATE_KEY_HERE\n-----END PRIVATE KEY-----\n"
4GOOGLE_SITE_URL=https://www.yoursite.com

Install the googleapis npm package by adding it to your project's dependencies. Run npm install googleapis in your project directory, or if you are editing the package.json directly, add 'googleapis' to the dependencies object. This package provides a typed client for all Google APIs including Search Console, and it handles OAuth2 authentication with service accounts automatically. Create app/api/search-console/route.ts in your project. This route authenticates with Google using your service account credentials, then calls the Search Console Search Analytics API to retrieve query performance data. The googleapis package abstracts the OAuth2 token exchange — you provide the credentials and the package handles getting and refreshing access tokens automatically. The Search Console Search Analytics API accepts a query payload that specifies: the date range (startDate and endDate), dimensions to group by (query, page, country, device), and a row limit. The response contains a rows array where each row has keys (the dimension values) and metrics (clicks, impressions, ctr, position). Your API route transforms this response into a clean format for your frontend components. The route also accepts URL query parameters so the frontend can control the date range and dimension. This makes your V0-generated dashboard dynamic — users can switch between 7-day, 28-day, and 90-day views without hard-coded date ranges in the API.

1// app/api/search-console/route.ts
2import { NextRequest, NextResponse } from 'next/server'
3import { google } from 'googleapis'
4
5export async function GET(request: NextRequest) {
6  const email = process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL
7  const privateKey = process.env.GOOGLE_PRIVATE_KEY
8  const siteUrl = process.env.GOOGLE_SITE_URL
9
10  if (!email || !privateKey || !siteUrl) {
11    return NextResponse.json(
12      { error: 'Google Search Console credentials not configured' },
13      { status: 500 }
14    )
15  }
16
17  const { searchParams } = new URL(request.url)
18  const days = parseInt(searchParams.get('days') ?? '28', 10)
19  const dimension = searchParams.get('dimension') ?? 'query'
20  const rowLimit = parseInt(searchParams.get('limit') ?? '25', 10)
21
22  // Calculate date range
23  const endDate = new Date()
24  endDate.setDate(endDate.getDate() - 3) // GSC data has ~3 day delay
25  const startDate = new Date(endDate)
26  startDate.setDate(startDate.getDate() - days)
27
28  const formatDate = (d: Date) => d.toISOString().split('T')[0]
29
30  try {
31    // Authenticate with service account
32    const auth = new google.auth.GoogleAuth({
33      credentials: {
34        client_email: email,
35        // Replace escaped newlines from env var storage
36        private_key: privateKey.replace(/\\n/g, '\n'),
37      },
38      scopes: ['https://www.googleapis.com/auth/webmasters.readonly'],
39    })
40
41    const searchconsole = google.searchconsole({ version: 'v1', auth })
42
43    const response = await searchconsole.searchanalytics.query({
44      siteUrl,
45      requestBody: {
46        startDate: formatDate(startDate),
47        endDate: formatDate(endDate),
48        dimensions: [dimension as 'query' | 'page' | 'country' | 'device'],
49        rowLimit,
50        orderBy: [
51          {
52            fieldName: 'clicks',
53            sortOrder: 'DESCENDING',
54          },
55        ],
56      },
57    })
58
59    const rows = response.data.rows ?? []
60
61    const formatted = rows.map((row) => ({
62      [dimension]: row.keys?.[0] ?? '',
63      clicks: row.clicks ?? 0,
64      impressions: row.impressions ?? 0,
65      ctr: row.ctr ?? 0,
66      position: row.position ?? 0,
67    }))
68
69    return NextResponse.json({
70      rows: formatted,
71      dateRange: {
72        startDate: formatDate(startDate),
73        endDate: formatDate(endDate),
74      },
75      fetchedAt: new Date().toISOString(),
76    })
77  } catch (error) {
78    console.error('Search Console API error:', error)
79    return NextResponse.json(
80      { error: 'Failed to fetch Search Console data' },
81      { status: 500 }
82    )
83  }
84}

With the API route working, use V0 to generate polished dashboard components that display your Search Console data in a useful, visually clear way. V0's strength here is generating data visualization components quickly — sortable tables, metric cards, trend indicators, and date range controls — without you writing UI code manually. Start with the main dashboard layout. Describe the key metrics you want to show at the top: total clicks, total impressions, average CTR, and average position as summary cards. Then describe the main table showing individual queries, with sorting functionality so users can sort by any column. Include a date range selector (dropdown with 7 days, 28 days, 90 days options) that re-fetches data from the API route when changed. For the position column, ask V0 to add color coding: green for positions 1-10 (first page of Google), yellow for 11-20 (second page), and red for 21+ (beyond second page). This visual hierarchy makes it immediately obvious which queries need attention. V0 can also generate a separate page performance view by changing the dimension parameter to 'page' in the API call, showing which URLs on your site drive the most organic traffic. After generating the dashboard, check that V0 implemented proper number formatting: CTR should display as a percentage (multiply the raw decimal by 100 and round to 1 decimal), position should round to 1 decimal, and clicks/impressions should use thousands separators for readability. Ask V0 to add these formatting details if they are missing.

Deploy your project to Vercel and verify the Search Console integration works in production. Since your Google service account credentials are stored as Vercel environment variables (not in your code), they are automatically available to your API route on Vercel's serverless infrastructure without any additional configuration. After deployment, access your production URL and navigate to your SEO dashboard. If the data loads correctly, the integration is working. If you see an error, check the Vercel function logs by going to Vercel Dashboard → your project → Deployments → click the latest deployment → Functions tab. Look for any error messages related to authentication or the googleapis package. An important security consideration: your SEO dashboard contains proprietary performance data that you should protect from public access. Add authentication to the dashboard page so only you or your team can see it. The simplest approach is to add Next.js middleware that checks for a session cookie or HTTP basic auth. Ask V0 to generate a simple password-protected layout wrapper, or use Vercel's built-in password protection feature (Vercel Dashboard → Settings → Password Protection) to add a password to your entire Vercel deployment without any code changes. For production apps where multiple team members need access, integrate NextAuth.js or Clerk for proper authentication.