내가 Next.js, Supabase, Claude AI로 5,000페이지 프로그램식 SEO 엔진을 구축한 방법

발행: (2026년 2월 21일 오후 07:39 GMT+9)
6 분 소요
원문: Dev.to

Source: Dev.to

The Architecture

스택은 간단합니다:

  • Frontend: Next.js 16 + App Router
  • Database: Supabase (PostgreSQL)
  • Automation: Make.com을 이용한 데이터 파이프라인
  • AI: Claude API를 통한 콘텐츠 생성

이 사이트는 세 가지 페이지 유형에 대해 다섯 개 언어(NL, EN, DE, FR, ES)를 제공합니다:

  1. 항공편 상세 페이지
  2. 공항 허브 페이지
  3. 항공사 개요 페이지

Data Pipeline

Make.com 시나리오가 8시간마다 실행되며:

  1. AviationStack API에서 지연 및 취소된 항공편 데이터를 가져옵니다.
  2. 각 레코드에 공항 상세 정보, OpenWeather의 날씨 컨텍스트, 보상 금액을 위한 대원거리 거리 계산을 추가합니다.
  3. Claude API를 호출해 배지, 요약, 승객 팁이 포함된 네덜란드어 분석을 생성합니다.
  4. flight_iata-dep-arr-date와 같은 결정론적 슬러그 패턴을 사용해 풍부해진 레코드를 Supabase에 Upsert합니다.

Page Generation

Next.js 동적 라우트와 ISR(Incremental Static Regeneration)이 렌더링을 담당합니다.

  • 각 항공편 페이지는 /[locale]/vlucht/[slug]에 존재합니다.
  • 데이터는 요청 시 Supabase에서 가져오며 1시간 재검증 윈도우를 가집니다.
  • 새로운 항공편은 리빌드 없이 자동으로 나타나고, 페이지는 엣지에 캐시되어 빠르게 제공됩니다.

슬러그 전략은 항공편 번호, 경로, 날짜를 인코딩합니다(예: kl1234-ams-lhr-2026-02-15). 이를 통해 각 URL이 고유하고 키워드가 풍부해집니다. Google은 슬러그를 파싱해 페이지 내용이 정확히 무엇인지 이해할 수 있습니다.

Multi‑language SEO

  • 로케일 기반 라우팅을 사용해 다섯 언어로 페이지를 생성합니다.
  • 언어별 경로 구조가 다릅니다(/nl/vlucht/ vs /en/flight/) — 현지 검색 패턴에 맞추기 위함입니다.
  • hreflang 태그가 언어 변형을 연결합니다.
  • 동적 사이트맵이 모든 로케일에 걸친 공개된 항공편을 나열합니다 — 현재 5,700개 URL1,134개 항공편에서 생성되었습니다.

Internal Linking Strategy

  • 각 공항 페이지는 최신 항공편에 링크합니다.
  • 각 항공사 페이지는 해당 항공사의 항공편을 보여줍니다.
  • 모든 페이지의 푸터에는 공항, 항공사, 최신 취소 항공편에 대한 교차 링크가 포함됩니다.

이렇게 하면 몇 개의 진입점만으로도 Google이 모든 페이지를 발견하고 크롤링할 수 있는 촘촘한 내부 링크 그래프가 형성됩니다.

Lessons Learned

  • Crawling: 새로운 도메인에서 프로그램적 SEO는 인내심이 필요합니다. 백링크가 전혀 없을 경우, 완전한 사이트맵을 제공해도 Google이 홈페이지를 넘어 크롤링하는 데 몇 주가 걸렸습니다. 외부 백링크가 크롤링을 시작하는 데 필수적입니다.
  • AI Guardrails: Claude는 훌륭한 네덜란드어 요약을 제공하지만, 일관된 배지 할당과 적절한 톤을 얻기 위해 프롬프트 엔지니어링에 여러 차례 반복이 필요했습니다.
  • ISR Caching: 페이지는 누군가 방문하기 전까지 업데이트되지 않으며, 이는 공항 페이지에서 오래된 데이터를 초래할 수 있습니다. cron 기반 캐시 워밍 스크립트로 이를 해결했습니다.

The Result

FlyClaim.AI는 이제 5,000개가 넘는 페이지를 자동으로 생성합니다. 각 페이지는 고유한 AI 작성 콘텐츠와 다섯 언어로 된 특정 지연 또는 취소된 항공편을 타깃으로 합니다. 전체 시스템은 Vercel 무료 티어, Supabase 무료 티어, Make.com 스타터 플랜으로 운영됩니다.

프로그램적 SEO나 AI 기반 콘텐츠 엔진 구축에 관심이 있다면 댓글로 질문해 주세요.

Check it out:

0 조회
Back to Blog

관련 글

더 보기 »

서브넷팅 설명

Subnetting이란 무엇인가? 큰 아파트 건물을 여러 층으로 나누는 것과 같다. 각 층 서브넷은 자체 번호가 매겨진 유닛(hosts)을 가지고, 그리고 건물…