Back to integrations
Next.js

Next.js

Integrate xseek with Next.js using our middleware solution. Track and optimize your Next.js website for AI search engines and improve visibility.

Overview

Our Next.js middleware integration allows you to add AI SEO tracking capabilities to your Next.js applications with minimal configuration. By leveraging the built-in middleware capabilities of Next.js, you can track AI interactions across your entire site without modifying individual pages. This solution works with both app router and pages router applications and provides complete coverage of your Next.js site.

Features

  • Seamless integration with Next.js middleware
  • Automatic tracking of all routes
  • Real-time AI visibility analytics
  • Easy installation with npm/yarn/pnpm
  • Detailed performance insights for Next.js applications
  • Compatible with app router and pages router
  • Zero impact on site performance
  • Tracks all major AI systems including ChatGPT, Claude, and Perplexity

Requirements

  • Next.js 12.0.0 or higher
  • API key from xseek
  • Website ID from your xseek dashboard

Setup Process

  1. 1

    Create an AI detection module in your Next.js project

  2. 2

    Add the detection function to your middleware.ts file

  3. 3

    Deploy your Next.js application to start tracking AI visits

Integration Setup

Important Information

Make sure to replace YOUR_API_KEY and YOUR_WEBSITE_ID with your actual values in the integration code. Your API key can be found in your account settings.

1Add detection code to your Next.js project

Create a new file (e.g., lib/ai-detection.js) with the following code:

// AI crawler detection for all major companies
const AI_BOTS = [
    { name: 'anthropic-ai', pattern: /anthropic-ai/i },
    { name: 'claudebot', pattern: /ClaudeBot/i },
    { name: 'claude-web', pattern: /claude-web/i },

    { name: 'perplexitybot', pattern: /PerplexityBot/i },
    { name: 'perplexity-user', pattern: /Perplexity-User/i },

    { name: 'grokbot', pattern: /GrokBot(?!.*DeepSearch)/i },
    { name: 'grok-search', pattern: /xAI-Grok/i },
    { name: 'grok-deepsearch', pattern: /Grok-DeepSearch/i },

    { name: 'deepseekbot', pattern: /DeepSeekBot/i },

    { name: 'GPTBot', pattern: /GPTBot/i },
    { name: 'chatgpt-user', pattern: /ChatGPT-User/i },
    { name: 'oai-searchbot', pattern: /OAI-SearchBot/i },

    { name: 'google-extended', pattern: /Google-Extended/i },

    { name: 'applebot', pattern: /Applebot(?!-Extended)/i },
    { name: 'applebot-extended', pattern: /Applebot-Extended/i },

    { name: 'meta-external', pattern: /meta-externalagent/i },
    { name: 'meta-externalfetcher', pattern: /meta-externalfetcher/i },

    { name: 'bingbot', pattern: /Bingbot(?!.*AI)/i },
    { name: 'bingpreview', pattern: /bingbot.*Chrome/i },
    { name: 'microsoftpreview', pattern: /MicrosoftPreview/i },

    { name: 'cohere-ai', pattern: /cohere-ai/i },
    { name: 'cohere-training-data-crawler', pattern: /cohere-training-data-crawler/i },

    { name: 'youbot', pattern: /YouBot/i },

    { name: 'duckassistbot', pattern: /DuckAssistBot/i },

    { name: 'semanticscholarbot', pattern: /SemanticScholarBot/i },

    { name: 'ccbot', pattern: /CCBot/i },

    { name: 'ai2bot', pattern: /AI2Bot/i },
    { name: 'ai2bot-dolma', pattern: /AI2Bot-Dolma/i },

    { name: 'aihitbot', pattern: /aiHitBot/i },

    { name: 'amazonbot', pattern: /Amazonbot/i },
    { name: 'novaact', pattern: /NovaAct/i },

    { name: 'brightbot', pattern: /Brightbot/i },

    { name: 'bytespider', pattern: /Bytespider/i },
    { name: 'tiktokspider', pattern: /TikTokSpider/i },

    { name: 'cotoyogi', pattern: /Cotoyogi/i },

    { name: 'crawlspace', pattern: /Crawlspace/i },

    { name: 'pangubot', pattern: /PanguBot/i },
    { name: 'petalbot', pattern: /PetalBot/i },

    { name: 'semrushbot-ocob', pattern: /SemrushBot-OCOB/i },
    { name: 'semrushbot-swa', pattern: /SemrushBot-SWA/i },

    { name: 'sidetrade-indexer', pattern: /Sidetrade indexer bot/i },

    { name: 'timpibot', pattern: /Timpibot/i },

    { name: 'velenpublicwebcrawler', pattern: /VelenPublicWebCrawler/i },

    { name: 'omgili', pattern: /omgili/i },
    { name: 'omgilibot', pattern: /omgilibot/i },
    { name: 'webzio-extended', pattern: /Webzio-Extended/i }
];

// Function to detect and log AI crawler visits
export function detectAndLogAIBot(req) {
    const userAgent = req.headers.get('user-agent') || '';
    
    for (const bot of AI_BOTS) {
        if (bot.pattern.test(userAgent)) {
            // Send data to xseek API
            fetch(`https://api.aiseotracker.com/track-ai-bot`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'x-api-key': 'YOUR_API_KEY', // Replace with your actual API key
                },
                body: JSON.stringify({
                    botName: bot.name,
                    userAgent: userAgent,
                    url: req.nextUrl.toString(),
                    ip: req.ip || req.headers.get('x-forwarded-for') || undefined,
                    referer: req.headers.get('referer') || undefined,
                    websiteId: 'YOUR_WEBSITE_ID', // Add your website ID to track which website is being crawled
                }),
            }).catch(error => {
                console.error('Error calling track-ai-bot API:', error);
            });
            
            console.log(`AI crawler detected: ${bot.name}`);
            break;
        }
    }
}

2Call the function in your middleware

Add this code to your middleware.ts file:

// Add this to your middleware.ts
import { NextResponse } from 'next/server';

export function middleware(req) {
    // Detect and log AI bots
    detectAndLogAIBot(req);

    // Your other middleware logic...
    return NextResponse.next();
}

That's it!

Your Next.js app is now set up to track AI crawler visits. Come back to the xseek dashboard to see your data.

Need more help?

Check our comprehensive documentation for detailed instructions.

View documentation