How to Integrate Ahrefs with V0

1import { NextRequest, NextResponse } from 'next/server';
2
3const AHREFS_API_BASE = 'https://api.ahrefs.com/v3';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const target = searchParams.get('target');
8  const endpoint = searchParams.get('endpoint') ?? 'domain-overview';
9
10  if (!target) {
11    return NextResponse.json({ error: 'Missing target parameter' }, { status: 400 });
12  }
13
14  const apiToken = process.env.AHREFS_API_TOKEN;
15  if (!apiToken) {
16    return NextResponse.json({ error: 'Ahrefs API token not configured' }, { status: 500 });
17  }
18
19  try {
20    let ahrefsUrl = '';
21    if (endpoint === 'domain-overview') {
22      ahrefsUrl = `${AHREFS_API_BASE}/site-explorer/overview?target=${encodeURIComponent(target)}&mode=subdomains`;
23    } else if (endpoint === 'backlinks') {
24      ahrefsUrl = `${AHREFS_API_BASE}/site-explorer/all-backlinks?target=${encodeURIComponent(target)}&mode=subdomains&limit=20&order_by=domain_rating_source%3Adesc`;
25    } else if (endpoint === 'keywords') {
26      ahrefsUrl = `${AHREFS_API_BASE}/site-explorer/organic-keywords?target=${encodeURIComponent(target)}&mode=subdomains&limit=50&order_by=traffic%3Adesc`;
27    } else {
28      return NextResponse.json({ error: 'Unknown endpoint' }, { status: 400 });
29    }
30
31    const response = await fetch(ahrefsUrl, {
32      headers: {
33        'Authorization': `Bearer ${apiToken}`,
34        'Accept': 'application/json',
35      },
36    });
37
38    if (!response.ok) {
39      const errorText = await response.text();
40      return NextResponse.json(
41        { error: `Ahrefs API error: ${response.status}`, details: errorText },
42        { status: response.status }
43      );
44    }
45
46    const data = await response.json();
47    return NextResponse.json(data);
48  } catch (error) {
49    console.error('Ahrefs API route error:', error);
50    return NextResponse.json({ error: 'Failed to fetch from Ahrefs API' }, { status: 500 });
51  }
52}

1# .env.local (for local development only — do NOT commit this file)
2AHREFS_API_TOKEN=your_ahrefs_api_token_here

1'use client';
2
3import { useState } from 'react';
4
5interface AhrefsOverview {
6  domain_rating: number;
7  backlinks: number;
8  referring_domains: number;
9  organic_keywords: number;
10  organic_traffic: number;
11}
12
13export default function AhrefsDashboard() {
14  const [target, setTarget] = useState('');
15  const [data, setData] = useState<AhrefsOverview | null>(null);
16  const [loading, setLoading] = useState(false);
17  const [error, setError] = useState<string | null>(null);
18
19  async function handleSearch(e: React.FormEvent) {
20    e.preventDefault();
21    if (!target.trim()) return;
22    setLoading(true);
23    setError(null);
24    try {
25      const res = await fetch(
26        `/api/ahrefs?target=${encodeURIComponent(target)}&endpoint=domain-overview`
27      );
28      if (!res.ok) throw new Error(`API error: ${res.status}`);
29      const json = await res.json();
30      setData(json);
31    } catch (err) {
32      setError(err instanceof Error ? err.message : 'Failed to fetch data');
33    } finally {
34      setLoading(false);
35    }
36  }
37
38  return (
39    <div className="max-w-4xl mx-auto p-6">
40      <form onSubmit={handleSearch} className="flex gap-2 mb-6">
41        <input
42          type="text"
43          value={target}
44          onChange={(e) => setTarget(e.target.value)}
45          placeholder="Enter domain (e.g. example.com)"
46          className="flex-1 border rounded px-3 py-2"
47        />
48        <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded">
49          {loading ? 'Loading...' : 'Analyze'}
50        </button>
51      </form>
52      {error && <p className="text-red-500 mb-4">{error}</p>}
53      {data && (
54        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
55          <div className="border rounded p-4">
56            <p className="text-sm text-gray-500">Domain Rating</p>
57            <p className="text-2xl font-bold">{data.domain_rating}</p>
58          </div>
59          <div className="border rounded p-4">
60            <p className="text-sm text-gray-500">Backlinks</p>
61            <p className="text-2xl font-bold">{data.backlinks.toLocaleString()}</p>
62          </div>
63          <div className="border rounded p-4">
64            <p className="text-sm text-gray-500">Referring Domains</p>
65            <p className="text-2xl font-bold">{data.referring_domains.toLocaleString()}</p>
66          </div>
67          <div className="border rounded p-4">
68            <p className="text-sm text-gray-500">Organic Keywords</p>
69            <p className="text-2xl font-bold">{data.organic_keywords.toLocaleString()}</p>
70          </div>
71        </div>
72      )}
73    </div>
74  );
75}