BuzzRank Next.js Integration

Why Next.js + BuzzRank?

Next.js is a React framework for building fast, SEO-friendly web applications with static generation (SSG) and server-side rendering (SSR).

BuzzRank is a content automation platform for scaling programmatic SEO.

Together, they're a powerhouse for building SEO-optimized sites at scale.

Integration Options

1. API Integration (Dynamic Content)

Fetch BuzzRank content dynamically via API:

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.buzzrank.io/content/${params.slug}`, {
    headers: { 'Authorization': `Bearer ${process.env.BUZZRANK_API_KEY}` }
  });
  const content = await res.json();
  
  return { props: { content }, revalidate: 3600 };
}

Use case: Dynamic content that updates frequently. ISR ensures fresh content without full rebuilds.

2. JSON/Markdown Export (Static Content)

Export content from BuzzRank as JSON or Markdown, commit to your repo:

// pages/blog/[slug].js
import fs from 'fs';
import path from 'path';

export async function getStaticProps({ params }) {
  const contentPath = path.join(process.cwd(), 'content', `${params.slug}.md`);
  const content = fs.readFileSync(contentPath, 'utf8');
  
  return { props: { content } };
}

export async function getStaticPaths() {
  const files = fs.readdirSync(path.join(process.cwd(), 'content'));
  const paths = files.map(file => ({ params: { slug: file.replace('.md', '') } }));
  
  return { paths, fallback: false };
}

Use case: Fully static sites with maximum performance. Rebuild when content changes.

3. Headless CMS Integration

BuzzRank publishes to your headless CMS (Contentful, Sanity, Strapi), Next.js fetches from CMS:

// pages/blog/[slug].js
import { getContentFromCMS } from '@/lib/cms';

export async function getStaticProps({ params }) {
  const content = await getContentFromCMS(params.slug);
  return { props: { content }, revalidate: 3600 };
}

Use case: Teams that already use a headless CMS. BuzzRank automates content creation, CMS handles storage and delivery.

Programmatic SEO with Next.js

Next.js is perfect for programmatic SEO because of getStaticPaths:

// Generate 1000 location pages automatically
export async function getStaticPaths() {
  const cities = await fetch('https://api.buzzrank.io/cities').then(r => r.json());
  
  const paths = cities.map(city => ({
    params: { city: city.slug }
  }));
  
  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  const content = await fetch(`https://api.buzzrank.io/location/${params.city}`)
    .then(r => r.json());
  
  return { props: { content }, revalidate: 86400 };
}

BuzzRank generates unique content for each city. Next.js builds 1000 pages at deploy time. ISR keeps them fresh.

SEO Optimization

Next.js provides built-in SEO features that work seamlessly with BuzzRank:

next-seo integration:

import { NextSeo } from 'next-seo';

export default function Page({ content }) {
  return (
    <>
      <NextSeo
        title={content.metaTitle}
        description={content.metaDescription}
        openGraph={{
          title: content.metaTitle,
          description: content.metaDescription,
          url: `https://example.com/blog/${content.slug}`,
        }}
      />
      <article>{content.body}</article>
    </>
  );
}

BuzzRank generates optimized meta data, Next.js renders it perfectly.

Deployment Workflow

1. Generate content in BuzzRank (bulk or individual)
2. Export as JSON/Markdown or push via API
3. Commit to Git (if static) or trigger CMS webhook
4. Deploy to Vercel/Netlify (automatic rebuild)
5. ISR keeps content fresh without full rebuilds

Performance Benefits

• Static pages: Pre-rendered at build time = instant loading
• ISR: Fresh content without rebuilding entire site
• Edge caching: Vercel Edge Network serves content globally
• Image optimization: Next.js optimizes images automatically

Result: BuzzRank-generated content loads in <1 second, ranks higher, converts better.

Case Study: SaaS Programmatic SEO Site

• Framework: Next.js + BuzzRank API
• Content: 500 programmatically generated pages (features, comparisons, integrations)
• Build time: 3 minutes (with ISR)
• Performance: 100/100 PageSpeed score
• Traffic: 10k organic visitors/month in 3 months

Try BuzzRank with Next.js →