Next.js를 사용해 n8n 워크플로우용 2,800개 이상의 SEO 페이지를 생성한 방법

Source: Dev.to

“만들면 사람들이 올 것이다.”

…음, 사실 그렇지 않다. 구글이 당신이 존재한다는 걸 모르면 안 된다.

나는 n8nworkflows.world, n8n 자동화 템플릿을 위한 검색 엔진을 만들고 있다. 목표는 간단했다: 공식 포럼보다 고품질의 검증된 n8n 워크플로를 더 쉽게 찾을 수 있게 하는 것.

하지만 난관에 봉착했다. 사람들은 단순히 “n8n workflows”를 검색하지 않는다. 그들은 구체적인 문제를 검색한다:

• “Telegram 파일을 Google Drive에 저장하는 방법”
• “Notion에서 Slack으로 자동화”
• “Postgres를 Google Sheets와 동기화”

이 트래픽을 잡기 위해서는 가능한 모든 통합 조합에 대한 랜딩 페이지가 필요했다. 수동으로 작성한다면 수년이 걸릴 것이다.

그래서 나는 Next.js와 Programmatic SEO를 사용해 하룻밤 사이에 2,819개 이상의 페이지를 생성했다. 내가 어떻게 했는지 보자.

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 🛠️

3. 구현: JSON에서 SEO 페이지까지

단계 1 – 관계 분석

나는 6,000개 이상의 n8n 워크플로우 JSON 파일이 저장된 데이터베이스를 가지고 있습니다.
Python 스크립트가 이러한 JSON을 파싱하고 “Node Pairs.” 를 추출합니다.

예시: Telegram Trigger 노드와 Google Drive 노드를 포함하는 워크플로우는 telegram-to-google-drive 관계를 생성합니다.

쌍들은 Supabase 테이블 integration_pairs에 저장됩니다:

단계 2 – Next.js를 이용한 동적 라우팅

Next.js는 동적 라우트를 사용함으로써 2,000개의 물리 파일을 만들 필요를 없애줍니다.

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 (
    <>
      <h1>{slug.split('-').join(' ')} Integrations</h1>
      <ul>
        {workflows.map((wf) => (
          <li key={wf.id}>{wf.name}</li>
        ))}
      </ul>
    </>
  );
}

단계 3 – 디렉터리 인덱스 (“맵”)

Google이 2,800개 이상의 동적 페이지를 발견하도록 돕기 위해, 모든 조합을 알파벳 순(A‑Z)으로 나열한 방대한 디렉터리 페이지를 만들었습니다. 이는 사용자와 크롤러를 위한 “사이트맵” 역할을 합니다.

4. 결과: SEO 머신 🚀

• 2,819+개의 새로운 진입점 – 틈새 자동화를 검색하는 사용자가 전용 페이지에 바로 도착합니다.
• 향상된 UX – 사용자는 “Apps”별로 탐색할 수 있습니다. Notion으로 할 수 있는 모든 것을 원하시나요? Notion 컬렉션으로 이동하세요.
• 확장성 – “DeepSeek”와 “WhatsApp”을 연결하는 새로운 워크플로를 추가하면 자동으로 /integration/deepseek-to-whatsapp가 생성됩니다.

5. 보너스: 리더보드 🏆

사이트를 더 매력적으로 만들기 위해 “명예의 전당” 리더보드를 추가했습니다. 이 리더보드는 워크플로의 Heat Index(조회수 + 다운로드) 를 실시간으로 추적하여 커뮤니티가 현재 무엇을 만들고 있는지 보여줍니다.

Source:

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, giving credit where it’s due and further enriching the community experience.

## 제작자에게 크레딧을 되돌리고 “Author Portfolio” 페이지 만들기  
*(또 다른 SEO 성공!)*  

**실제 디렉터리를 확인해 보세요:**  

👉 **[n8n Integration Directory](https://n8nworkflows.world/integration)**  

생각을 알려 주세요! 프로젝트에 프로그래매틱 SEO를 시도해 보셨나요?