How I Built an Affiliate Site with Next.js (Full Build Log)

Why I Chose Next.js for an Affiliate Site

When most people think affiliate sites, they think WordPress + a page builder. That's fine — WordPress works. But I had specific requirements:

• Performance: Core Web Vitals are a real ranking factor and I wanted near-perfect scores
• Programmatic scale: I wanted to be able to generate hundreds of pages from structured data without a bloated CMS
• Developer control: I wanted to write real code, not fight with plugins
• Static generation: The site needed to be fast everywhere, not reliant on server response time

Next.js with Static Site Generation (SSG) checked all of these boxes. I could build pages from JSON data files, deploy to Vercel for free on the hobby tier, and get PageSpeed scores in the 95–100 range.

Project Setup and Structure

Here's the folder structure I use for affiliate sites built with Next.js:

my-affiliate-site/
├── app/
│   ├── layout.tsx          # Site-wide layout, header, footer
│   ├── page.tsx            # Homepage
│   ├── blog/
│   │   ├── page.tsx        # Blog index
│   │   └── [slug]/
│   │       └── page.tsx    # Individual post pages
│   └── [category]/
│       ├── page.tsx        # Category hub page
│       └── [post]/
│           └── page.tsx    # Article pages
├── content/
│   └── posts/              # MDX files — one per article
├── data/
│   └── products.json       # Affiliate product database
├── components/
│   ├── ToolCard.tsx        # Affiliate product card
│   ├── TOC.tsx             # Table of contents
│   └── RelatedPosts.tsx    # Related posts component
└── public/

Content Management: MDX Files

I author all content in MDX — Markdown with JSX components. This means I can write articles in clean Markdown but drop in custom components like <ToolCard> for affiliate product cards anywhere in the content. It's a much cleaner separation of content and code than WordPress shortcodes or Gutenberg blocks.

AI-Assisted Content Pipeline

Here's the exact AI content pipeline I run with this Next.js setup:

1. I generate a first draft using an AI writing tool, targeting the keyword in the H1 and outline
2. I clean up and rewrite the draft in MDX format, adding my own examples and voice
3. I add <ToolCard> components at natural recommendation points
4. I run the MDX file through a lint check to catch broken links and missing frontmatter
5. I commit and push — Vercel auto-deploys within 30 seconds

The frontmatter for each post looks like this:

---
title: "My Exact Affiliate Marketing Workflow"
description: "The full process I follow every week..."
slug: "affiliate-marketing-workflow"
category: "workflows"
publishDate: "2026-03-01"
keywords: ["affiliate marketing workflow", "affiliate process"]
---

SEO Configuration

The SEO setup in Next.js uses the Metadata API (Next.js 13+). For every page, I generate dynamic metadata from frontmatter:

export async function generateMetadata({ params }) {
  const post = getPostBySlug(params.slug);
  return {
    title: post.title,
    description: post.description,
    alternates: { canonical: `https://mysite.com/${post.category}/${post.slug}/` },
    openGraph: {
      title: post.title,
      type: 'article',
      publishedTime: post.publishDate,
    }
  };
}

I also generate a sitemap.ts file that automatically includes every post and category page — this updates every time I deploy.

Deployment on Vercel

I deploy on Vercel. The configuration is minimal — Vercel detects Next.js automatically and configures everything. My setup:

• Hobby tier (free) for sites under ~100k monthly visits
• Custom domain connected via DNS A record
• Automatic deployments from GitHub main branch
• Edge Network for global CDN distribution

If you want a comparison between Vercel and Netlify for this use case, read my detailed breakdown: Vercel vs Netlify for Affiliate Sites.

Monetization and Affiliate Link Management

I manage affiliate links through a central products.json file. Each product has a unique slug, and the <ToolCard> component pulls from this file. When an affiliate link changes (which happens more often than you'd think), I update it in one place and it propagates to every post on the site instantly.

{
  "ahrefs": {
    "name": "Ahrefs",
    "description": "Keyword research and competitor analysis",
    "affiliateUrl": "https://ahrefs.com/?via=mylink",
    "cta": "Try Ahrefs Free"
  }
}

Early Results

Within 60 days of launch, the site was ranking on page 1 for several Very Low KD keywords. The technical performance scores helped — Google Search Console showed consistently excellent Core Web Vitals scores from day one.

The biggest advantage I found is the crawlability. Static HTML pages with clean semantic markup and automatic sitemaps get indexed faster than WordPress sites in my testing. This matters a lot in the early days when every indexed page is a potential traffic source.