How to Integrate Bolt.new with Google Search Console

1// lib/google-auth.ts
2// Requires: npm install jose
3import { SignJWT, importPKCS8 } from 'jose';
4
5interface ServiceAccount {
6  client_email: string;
7  private_key: string;
8  token_uri: string;
9}
10
11let cachedToken: { token: string; expires: number } | null = null;
12
13export async function getGoogleAccessToken(): Promise<string> {
14  // Return cached token if still valid (with 60s buffer)
15  if (cachedToken && Date.now() < cachedToken.expires - 60000) {
16    return cachedToken.token;
17  }
18
19  const serviceAccountJson = process.env.GOOGLE_SERVICE_ACCOUNT_JSON;
20  if (!serviceAccountJson) {
21    throw new Error('GOOGLE_SERVICE_ACCOUNT_JSON not configured');
22  }
23
24  const sa: ServiceAccount = JSON.parse(serviceAccountJson);
25  const privateKey = await importPKCS8(sa.private_key, 'RS256');
26
27  const now = Math.floor(Date.now() / 1000);
28  const jwt = await new SignJWT({
29    iss: sa.client_email,
30    sub: sa.client_email,
31    aud: sa.token_uri,
32    scope: 'https://www.googleapis.com/auth/webmasters.readonly',
33    iat: now,
34    exp: now + 3600,
35  })
36    .setProtectedHeader({ alg: 'RS256' })
37    .sign(privateKey);
38
39  const tokenRes = await fetch(sa.token_uri, {
40    method: 'POST',
41    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
42    body: new URLSearchParams({
43      grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer',
44      assertion: jwt,
45    }),
46  });
47
48  const tokenData = await tokenRes.json();
49  if (!tokenData.access_token) {
50    throw new Error(`Token exchange failed: ${JSON.stringify(tokenData)}`);
51  }
52
53  cachedToken = {
54    token: tokenData.access_token,
55    expires: Date.now() + tokenData.expires_in * 1000,
56  };
57
58  return cachedToken.token;
59}

1// app/api/gsc/keywords/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { getGoogleAccessToken } from '@/lib/google-auth';
4
5export async function GET(request: NextRequest) {
6  const siteUrl = request.nextUrl.searchParams.get('siteUrl')
7    ?? process.env.GSC_SITE_URL;
8  const days = Math.min(parseInt(request.nextUrl.searchParams.get('days') ?? '28'), 90);
9
10  if (!siteUrl) {
11    return NextResponse.json({ error: 'siteUrl required' }, { status: 400 });
12  }
13
14  const endDate = new Date(Date.now() - 3 * 86400000); // 3-day delay
15  const startDate = new Date(endDate.getTime() - days * 86400000);
16  const fmt = (d: Date) => d.toISOString().split('T')[0];
17
18  try {
19    const token = await getGoogleAccessToken();
20    const encodedSite = encodeURIComponent(siteUrl);
21
22    const res = await fetch(
23      `https://www.googleapis.com/webmasters/v3/sites/${encodedSite}/searchAnalytics/query`,
24      {
25        method: 'POST',
26        headers: {
27          Authorization: `Bearer ${token}`,
28          'Content-Type': 'application/json',
29        },
30        body: JSON.stringify({
31          startDate: fmt(startDate),
32          endDate: fmt(endDate),
33          dimensions: ['query'],
34          rowLimit: 20,
35          orderBy: [{ fieldName: 'clicks', sortOrder: 'DESCENDING' }],
36        }),
37      }
38    );
39
40    if (!res.ok) {
41      const err = await res.json();
42      throw new Error(err.error?.message ?? `HTTP ${res.status}`);
43    }
44
45    const data = await res.json();
46    const keywords = (data.rows ?? []).map((row: any) => ({
47      keyword: row.keys[0],
48      clicks: row.clicks,
49      impressions: row.impressions,
50      ctr: Math.round(row.ctr * 1000) / 10,
51      position: Math.round(row.position * 10) / 10,
52    }));
53
54    return NextResponse.json({
55      siteUrl,
56      dateRange: { startDate: fmt(startDate), endDate: fmt(endDate) },
57      keywords,
58    });
59  } catch (error) {
60    const message = error instanceof Error ? error.message : 'Unknown error';
61    return NextResponse.json({ error: message }, { status: 500 });
62  }
63}

1// app/api/gsc/compare/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { getGoogleAccessToken } from '@/lib/google-auth';
4
5async function querySearchConsole(
6  siteUrl: string,
7  startDate: string,
8  endDate: string,
9  token: string
10) {
11  const res = await fetch(
12    `https://www.googleapis.com/webmasters/v3/sites/${encodeURIComponent(siteUrl)}/searchAnalytics/query`,
13    {
14      method: 'POST',
15      headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
16      body: JSON.stringify({
17        startDate,
18        endDate,
19        dimensions: ['query'],
20        rowLimit: 50,
21      }),
22    }
23  );
24  const data = await res.json();
25  const map: Record<string, { clicks: number; position: number }> = {};
26  for (const row of data.rows ?? []) {
27    map[row.keys[0]] = { clicks: row.clicks, position: row.position };
28  }
29  return map;
30}
31
32export async function GET(request: NextRequest) {
33  const siteUrl = request.nextUrl.searchParams.get('siteUrl') ?? process.env.GSC_SITE_URL ?? '';
34  const days = parseInt(request.nextUrl.searchParams.get('days') ?? '28');
35  const fmt = (d: Date) => d.toISOString().split('T')[0];
36
37  const now = Date.now() - 3 * 86400000;
38  const currentEnd = new Date(now);
39  const currentStart = new Date(now - days * 86400000);
40  const prevEnd = new Date(now - days * 86400000 - 86400000);
41  const prevStart = new Date(now - days * 2 * 86400000 - 86400000);
42
43  try {
44    const token = await getGoogleAccessToken();
45    const [current, previous] = await Promise.all([
46      querySearchConsole(siteUrl, fmt(currentStart), fmt(currentEnd), token),
47      querySearchConsole(siteUrl, fmt(prevStart), fmt(prevEnd), token),
48    ]);
49
50    const keywords = Object.entries(current).map(([keyword, curr]) => {
51      const prev = previous[keyword] ?? { clicks: 0, position: 0 };
52      return {
53        keyword,
54        clicks: curr.clicks,
55        clickChange: curr.clicks - prev.clicks,
56        position: Math.round(curr.position * 10) / 10,
57        positionChange: Math.round((prev.position - curr.position) * 10) / 10,
58      };
59    }).sort((a, b) => Math.abs(b.positionChange) - Math.abs(a.positionChange));
60
61    return NextResponse.json({ siteUrl, keywords });
62  } catch (error) {
63    const message = error instanceof Error ? error.message : 'Unknown error';
64    return NextResponse.json({ error: message }, { status: 500 });
65  }
66}

1// app/dashboard/search-console/page.tsx
2'use client';
3import { useState, useEffect } from 'react';
4
5interface KeywordRow {
6  keyword: string;
7  clicks: number;
8  impressions: number;
9  ctr: number;
10  position: number;
11}
12
13export default function SearchConsoleDashboard() {
14  const [days, setDays] = useState(28);
15  const [data, setData] = useState<KeywordRow[]>([]);
16  const [loading, setLoading] = useState(true);
17  const [error, setError] = useState('');
18
19  useEffect(() => {
20    setLoading(true);
21    fetch(`/api/gsc/keywords?days=${days}`)
22      .then((r) => r.json())
23      .then((d) => {
24        setData(d.keywords ?? []);
25        setLoading(false);
26      })
27      .catch((e) => {
28        setError(e.message);
29        setLoading(false);
30      });
31  }, [days]);
32
33  const positionColor = (pos: number) =>
34    pos <= 3 ? '#22c55e' : pos <= 10 ? '#eab308' : '#ef4444';
35
36  return (
37    <div className="p-6">
38      <h1 className="text-2xl font-bold mb-4">Search Performance</h1>
39      <div className="flex gap-2 mb-4">
40        {[7, 28, 90].map((d) => (
41          <button
42            key={d}
43            onClick={() => setDays(d)}
44            className={`px-3 py-1 rounded ${days === d ? 'bg-blue-600 text-white' : 'bg-gray-100'}`}
45          >
46            Last {d} days
47          </button>
48        ))}
49      </div>
50      {error && <p className="text-red-500">{error}</p>}
51      {loading ? (
52        <p>Loading...</p>
53      ) : (
54        <table className="w-full text-sm border-collapse">
55          <thead>
56            <tr className="bg-gray-50">
57              {['Keyword', 'Clicks', 'Impressions', 'CTR', 'Position'].map((h) => (
58                <th key={h} className="border p-2 text-left">{h}</th>
59              ))}
60            </tr>
61          </thead>
62          <tbody>
63            {data.map((row, i) => (
64              <tr key={i} className="hover:bg-gray-50">
65                <td className="border p-2">{row.keyword}</td>
66                <td className="border p-2">{row.clicks.toLocaleString()}</td>
67                <td className="border p-2">{row.impressions.toLocaleString()}</td>
68                <td className="border p-2">{row.ctr}%</td>
69                <td className="border p-2" style={{ color: positionColor(row.position) }}>
70                  {row.position}
71                </td>
72              </tr>
73            ))}
74          </tbody>
75        </table>
76      )}
77    </div>
78  );
79}