ᐷ Ben Seymour

Optimising for AI SEO with Next.js and Vercel

The landscape of web search is fundamentally changing. Traditional SEO, while still important, is being augmented by AI systems that can understand content context, semantic relationships, and user intent in ways that keyword-stuffing and basic meta tags simply can't match.

As someone who's spent years in technical leadership roles, I've seen firsthand how the right technology choices can amplify your professional presence online. When I decided to optimise my personal site for AI SEO, I knew that Next.js and Vercel would be the perfect foundation for this transformation.

Why Next.js and Vercel for AI SEO?

The choice of technology stack matters more than ever when optimising for AI systems. Here's why Next.js and Vercel proved to be the ideal combination:

Server-Side Rendering with App Router

Next.js 13+ App Router provides built-in support for generating static metadata at build time, which is crucial for AI crawlers that need to understand content structure before JavaScript execution. Unlike client-side rendered applications, AI systems can immediately access the semantic HTML and structured data.

Edge Infrastructure

Vercel's global edge network ensures that AI crawlers from anywhere in the world get fast, consistent responses. This is particularly important for AI systems that may be rate-limited or have strict timeout requirements.

Built-in Performance Optimisations

Core Web Vitals directly impact how AI systems evaluate content quality. Next.js's automatic code splitting, image optimisation, and Vercel's edge caching create the fast, efficient experience that both users and AI systems expect.

The Comprehensive AI SEO Strategy

1. Enhanced Metadata Architecture

The foundation of AI SEO lies in rich, structured metadata. Next.js App Router's generateMetadata function allowed me to create dynamic, context-aware meta tags for every page:

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getBlogPost(params.slug)
  
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      publishedTime: post.publishedTime,
      authors: ['Ben Seymour'],
      tags: post.tags,
      images: [{
        url: `/api/og-blog-post?title=${encodeURIComponent(post.title)}`,
        width: 1200,
        height: 630,
        alt: `${post.title} - ${post.description}`
      }]
    }
  }
}

This approach ensures that AI systems receive comprehensive context about each piece of content, including publication dates, authorship, and semantic relationships.

2. Structured Data Implementation

Schema.org structured data provides AI systems with explicit understanding of content relationships. Using Next.js's server components, I implemented comprehensive structured data across all content types:

  • Person Schema: Professional background, expertise areas, and contact information
  • BlogPosting Schema: Article metadata, author attribution, and content relationships
  • FAQPage Schema: Structured Q&A content for better AI comprehension
  • BreadcrumbList Schema: Clear navigation hierarchy for content discovery

The beauty of Next.js is that this structured data is generated at build time, ensuring consistent, fast delivery to AI crawlers.

3. Semantic HTML5 Structure

AI systems rely heavily on semantic HTML to understand content hierarchy and meaning. Next.js App Router's component architecture made it straightforward to implement proper semantic structure:

<article className={styles.main}>
  <header>
    <h1>{title}</h1>
    <time dateTime={publishedTime}>{formattedDate}</time>
    <Breadcrumbs />
  </header>
  
  <div className={styles.post_content}>
    {content}
  </div>
  
  <footer>
    <ContentRecommendations />
  </footer>
</article>

This structure provides clear content boundaries and relationships that AI systems can easily parse and understand.

4. Intelligent Content Recommendations

One of the most powerful AI SEO features I implemented is an intelligent content recommendation system. Using Vercel's edge functions and Next.js API routes, I created a system that:

  • Analyzes content similarity using tag matching and keyword extraction
  • Provides contextual recommendations based on user behavior
  • Generates structured data for related content relationships
// API route for content recommendations
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const currentPost = searchParams.get('post')
  
  const recommendations = await generateRecommendations(currentPost)
  
  return NextResponse.json(recommendations)
}

This system not only improves user engagement but also helps AI systems understand content relationships and topical authority.

5. Performance Optimisation for AI Crawlers

AI systems are particularly sensitive to performance metrics. Vercel's edge infrastructure and Next.js optimisations created the perfect environment for AI-friendly performance:

  • Edge Caching: Global CDN ensures fast responses worldwide
  • Image Optimisation: Automatic WebP/AVIF delivery with proper alt text
  • Code Splitting: Reduced JavaScript bundle sizes for faster parsing
  • Static Generation: Pre-rendered content for immediate AI access

The result? Core Web Vitals scores that exceed 90 across all metrics, ensuring AI systems can efficiently crawl and index content.

6. Open Graph and Social Media Optimisation

AI systems increasingly consider social signals as ranking factors. Next.js's built-in Open Graph support, combined with Vercel's edge functions, enabled me to create dynamic, context-rich social media previews:

// Dynamic OG image generation
export default async function handler(req: NextRequest) {
  const { searchParams } = new URL(req.url)
  const title = searchParams.get('title')
  const description = searchParams.get('description')
  
  return new ImageResponse(
    <div tw="flex w-full h-full bg-blue-50">
      <div tw="flex flex-col justify-center px-8">
        <h1 tw="text-4xl font-bold text-gray-900">{title}</h1>
        <p tw="text-xl text-gray-600 mt-4">{description}</p>
      </div>
    </div>,
    { width: 1200, height: 630 }
  )
}

This approach ensures that every piece of content has a compelling social media presence, improving both human engagement and AI-discovered social signals.

The Technical Implementation

Content Management with MDX

Using MDX for content management provided the perfect balance of flexibility and structure. The frontmatter system allows for rich metadata whilst maintaining the simplicity of Markdown:

---
title: "Optimising for AI SEO with Next.js and Vercel"
description: "A comprehensive approach to making your website AI-friendly..."
date: "2025-09-04"
tags:
  - nextjs
  - vercel
  - seo
  - ai
coverimage: "/images/posts/ai-seo-optimization.jpg"
---

API Routes for Dynamic Content

Next.js API routes proved invaluable for creating AI-friendly endpoints. The blog posts API provides structured data that AI systems can easily consume:

export async function GET() {
  const posts = getBlogPosts().map(post => ({
    slug: post.slug,
    metadata: post.metadata,
    content: post.content,
    structuredData: generateStructuredData(post)
  }))
  
  return NextResponse.json(posts)
}

Edge Functions for Performance

Vercel's edge functions enabled me to create high-performance, globally distributed features:

  • Semantic Search: Real-time content discovery using edge computing
  • Content Recommendations: Fast, contextual suggestions
  • OG Image Generation: Dynamic social media previews

The Results: Measurable Impact

Technical Metrics

  • Core Web Vitals: 95+ across all metrics
  • Lighthouse Performance: 98/100
  • Accessibility Score: 100/100
  • SEO Score: 100/100

Content Discoverability

  • Structured Data Coverage: 100% of content types
  • Semantic HTML: Complete implementation across all pages
  • Internal Linking: Strategic content relationships established
  • Image Optimisation: 100% of images with descriptive alt text

AI-Specific Optimisations

  • Rich Metadata: Comprehensive context for AI systems
  • Content Relationships: Clear topical authority signals
  • Performance: Fast, efficient crawling experience
  • Social Signals: Enhanced social media presence

Key Takeaways for Technical Leaders

1. Technology Stack Matters

The choice of Next.js and Vercel wasn't just about developer experience—it was about providing the right foundation for AI systems to understand and index content effectively.

2. Performance is a Feature

AI systems are performance-sensitive. The edge infrastructure and optimisations that benefit users also benefit AI crawlers, creating a virtuous cycle of improved discoverability.

3. Structure Enables Intelligence

Rich metadata and semantic HTML provide the context that AI systems need to understand content relationships and topical authority.

4. User Experience and AI Experience Align

The features that improve AI discoverability—fast loading, clear structure, rich metadata—also improve the human user experience.

The Future of AI SEO

As AI systems become more sophisticated, the importance of structured, semantic content will only increase. The foundation I've built with Next.js and Vercel positions my site to adapt to future AI developments while maintaining excellent performance and user experience.

The key insight? AI SEO isn't about gaming the system—it's about creating genuinely valuable, well-structured content that both humans and AI systems can understand and appreciate. Next.js and Vercel provide the perfect platform for this approach.

Next Steps

For technical leaders looking to optimise their professional presence for AI systems, I recommend:

  1. Audit your current setup: Identify gaps in structured data and semantic HTML
  2. Choose the right technology: Next.js and Vercel provide excellent AI SEO foundations
  3. Focus on content quality: AI systems reward valuable, well-structured content
  4. Measure and iterate: Use tools like Lighthouse and structured data testing to track progress

The future of web search is AI-powered, and the sites that adapt will have a significant advantage. With Next.js and Vercel, that adaptation becomes not just possible, but enjoyable.

This post represents a comprehensive approach to AI SEO optimisation using modern web technologies. The implementation demonstrates how the right technology choices can amplify your professional presence in an AI-driven world.

nextjsvercelseoaiweb-developmentperformancetechnical-leadership