How I Built a Programmatic SEO Machine for n8n Workflows with Next.js

Question

"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 (pSEO) to generate 2,800+ pages overnight. Here is the technical breakdown of how I did it.

1. The Architecture ️

The stack is simple but powerful, designed for speed and SEO:

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

2. The Data Problem: Extracting Relationships

I started with a database of 6,000+ n8n workflow JSON files. To generate useful pages, I needed to understand "what connects to what".

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 with metadata:

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

3. Implementation: Dynamic Routes in 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

Here is a simplified version of the code:

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

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

export async function generateMetadata({ params }) {
  // Auto-generate SEO titles based on the URL slug
  // Example: "Best Telegram to Google Drive n8n Workflows"
  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;
  
  // 1. Fetch workflows that match this specific pair
  const workflows = await getWorkflowsByPair(slug);

  if (!workflows) return notFound();

  return (
      <div className="container mx-auto py-10">
        <h1 className="text-4xl font-bold mb-6">
            {slug.split('-').join(' ')} Integrations
        </h1>
        
        <p className="text-gray-400 mb-8">
            Browse {workflows.length} verified templates to automate your work.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {workflows.map(wf => (
             <WorkflowCard key={wf.id} data={wf} />
          ))}
        </div>
      </div>
  );
}

4. The Result: A Massive Directory Map

To help Google crawl these pages, I built a massive Directory Index. It lists every single combination alphabetically.

!

By deploying this structure, I achieved three things:

1. Scalability: If I add a new workflow that connects "DeepSeek" to "Whatsapp", the page /integration/deepseek-to-whatsapp is created automatically.
2. Long-tail Traffic: I am now indexing for specific queries that have low competition but high intent.
3. Better UX: Users can find exactly what they need without digging through forums.

5. Going Further: The "Google Opal" Experiment

Since the pSEO architecture was already in place, I recently expanded it to cover Google Opal (Google's new AI app builder).

I realized there was no gallery for Opal templates yet. So, I scraped the top 25 prompts and generated a new section on the site in just one weekend.

This proves the power of a flexible Next.js + Supabase architecture. You can spin up new "verticals" for your project incredibly fast.

Conclusion

Building a directory doesn't have to be manual work. With Programmatic SEO, you can leverage your existing data to create thousands of helpful entry points for your users.

You can check out the live result and the directory structure here: n8nworkflows.world

Happy coding!