zo Aoo

Posted on Jan 9

How I Generated 2,800+ SEO Pages for n8n Workflows using Next.js

#nextjs #seo #buildinpublic #webdev

"If you build it, they will come."
...Well, not really. Not if Google doesn't know you exist.

I've been building n8nworkflows.world, a search engine for n8n automation templates. My goal was simple: make it easier to find high-quality, verified n8n workflows than the official forums.

But I hit a wall. People don't just search for "n8n workflows". They search for specific problems:

"How to save Telegram files to Google Drive"
"Notion to Slack automation"
"Postgres to Google Sheets sync"

To capture this traffic, I needed a landing page for every single possible integration combination. Writing them manually would take years.

So, I used Next.js and Programmatic SEO to generate 2,819+ pages overnight. Here is how I did it.

1. The Problem: The "Long-Tail" Void 🕳️

The n8n ecosystem is vast. There are hundreds of nodes (integrations).
Mathematically, the number of potential connections (Node A → Node B) is massive.

Most users are looking for these specific pairs. If I only have a homepage, I miss out on 99% of search intent. I needed a structured directory that Google could crawl, indexing specific terms like Agile CRM + Schedule Trigger or Gmail + OpenAI.

2. The Tech Stack 🛠️

Frontend: Next.js 14 (App Router)
Database: Supabase (PostgreSQL)
Language: TypeScript
Data Processing: Python (for analyzing JSON relationships)

3. The Implementation: From JSON to SEO Pages

Step 1: Analyzing the Relationships

I have a database of 6,000+ n8n workflow JSON files.
I wrote a Python script to parse these JSONs and extract "Node Pairs".

For example, if a workflow contains a Telegram Trigger node and a Google Drive node, that creates a relationship: telegram-to-google-drive.

I stored these pairs in a separate Supabase table: integration_pairs.

slug: "telegram-to-google-drive"
app_a: "Telegram"
app_b: "Google Drive"
count: 42 (number of workflows using this pair)

Step 2: Dynamic Routing with Next.js

This is where Next.js shines. Instead of creating 2,000 physical files, I used Dynamic Routes.

I created a folder structure like this:
app/integration/[slug]/page.tsx

// app/integration/[slug]/page.tsx

import { createClient } from '@/utils/supabase/server';

export async function generateMetadata({ params }) {
  // Auto-generate SEO titles based on the URL slug
  const pair = params.slug.replace('-', ' to ');
  return {
    title: `Best ${pair} n8n Workflows & Templates (Free Download)`,
    description: `Discover verified automation templates to connect ${pair}. Download free JSONs.`
  };
}

export default async function IntegrationPage({ params }) {
  const { slug } = params;

  // Fetch all workflows that match this pair
  const workflows = await getWorkflowsByPair(slug);

  return (
      <div className="container mx-auto">
        <h1>{slug.split('-').join(' ')} Integrations</h1>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {workflows.map(wf => (
             <WorkflowCard key={wf.id} data={wf} />
          ))}
        </div>
      </div>
  );
}

Step 3: The Directory Index (The "Map")

To help Google find these 2,800+ dynamic pages, I built a massive Directory Page.

It lists every single combination alphabetically (A-Z). This serves as a "Sitemap" for users and crawlers.

4. The Result: A SEO Machine 🚀

By deploying this structure, I instantly created:

2,819+ New Entry Points: Users searching for niche automations can now land directly on a page dedicated to their specific stack.
Better UX: Users can browse by "Apps". If you want to see everything you can do with Notion, just go to the Notion collection.
Scalability: If I add a new workflow that connects "DeepSeek" to "Whatsapp", the page /integration/deepseek-to-whatsapp is created automatically.

5. Bonus: The Leaderboard 🏆

To make the site stickier, I also added a "Hall of Fame" Leaderboard.

It tracks the "Heat Index" (Views + Downloads) of workflows in real-time, so you can see what the community is actually building right now.

What's Next?

I'm currently working on an AI Agent that reads the workflow JSONs to automatically extract the original author's name and social links. The goal is to give credit back to the creators and build "Author Portfolio" pages (another SEO win!).

Check out the live directory here:
👉 n8n Integration Directory

Let me know what you think! Have you tried Programmatic SEO for your projects?

DEV Community