Lovable App을 Production Next.js로 마이그레이션

Lovable 앱이 성장해야 하는 이유

Lovable은 정말 놀랍다. 순수 영문으로 앱을 설명했고, TypeScript, shadcn/ui 컴포넌트, Tailwind CSS가 포함된 작동하는 React 프로토타입이 나왔다. Supabase 인증과 Postgres 데이터베이스까지 연결했을 수도 있다. 사용자가 있다. 트래션이 있다.

하지만 이제 벽에 부딪혔다.

Lovable은 Vite와 React Router로 구축된 단일 페이지 애플리케이션을 생성한다. 즉, 서버 사이드 렌더링이 없고, 의미있는 SEO가 없고, 엣지 컴퓨팅이 없으며, 인프라를 제어할 수 없다. 모든 페이지는 클라이언트 사이드 blob으로 로드된다. Google은 빈 div를 본다. Time to First Byte는 모든 것이 브라우저에서 렌더링되기 때문에 1초 이상이다.

Lovable이 구축한 것을 버릴 필요는 없다. 성장시켜야 한다.

Production에서 Lovable의 실제 고통 지점

서버 사이드 렌더링 없음

Lovable은 Vite SPA를 내보낸다. 모든 경로는 클라이언트 렌더링된다. 검색 엔진은 콘텐츠를 색인하는 데 어려움을 겪고, 소셜 미리보기가 깨지고, 초기 페이지 로드가 느려진다. 프로토타입 데모로는 괜찮다. 유기 트래픽을 놓고 경쟁하는 production 앱으로는 거래를 깬다.

Lovable 클라우드에 잠금

Lovable의 native Supabase 통합을 사용하면 데이터베이스와 인증이 Lovable의 관리 인프라에 존재한다. Supabase 프로젝트를 직접 제어하지 않는다. Lovable이 가격을 변경하거나 다운되거나 기능을 중단하면 production 앱이 그들의 자비에 달려 있다.

실제 배포 파이프라인 없음

Lovable의 원클릭 호스팅은 편리하지만 배포 전략이 아니다. 스테이징 환경이 없고, pull request에 대한 미리보기 배포가 없고, 롤백 기능이 없고, dev, staging, production 전체에서 환경 변수 관리가 없다. 그냥... 버튼일 뿐이다.

SPA 라우팅은 규모에서 깨짐

React Router 평탄 파일 라우팅은 10개 페이지에서 잘 작동한다. 중첩 레이아웃, 병렬 경로, 가로채는 경로 또는 미들웨어 수준 인증 가드가 필요하면, 기능을 배송하는 대신 아키텍처와 싸운다.

AI 생성 코드 부채

Lovable의 AI는 기능적인 코드를 작성한다. 최적의 코드가 아니다. 중복된 로직, 불일치한 오류 처리, 누락된 로딩 상태, 너무 많은 작업을 하는 컴포넌트를 찾을 것이다. 실제 사용자가 엣지 케이스에 도달하면 그 기술 부채는 빠르게 증가한다.

Next.js + Supabase + Vercel로 얻는 것

서버 사이드 렌더링과 정적 생성

Next.js 15 App Router는 전체 스펙트럼을 제공한다: 한 번 구축되고 CDN에서 제공되는 정적 페이지, 모든 요청에서 신선한 데이터를 가져오는 서버 렌더링 페이지, 둘 사이의 최고 지점을 위한 증분 정적 재생성. Lighthouse 점수는 50대에서 90대 후반으로 뛴다.

완전한 Supabase 소유권

우리는 당신이 실제로 소유하는 Supabase 프로젝트로 데이터베이스 스키마, 행 수준 보안 정책, 엣지 함수, 인증 구성을 마이그레이션한다. 직접 대시보드 액세스, CLI 제어, 버전 제어 워크플로를 통한 마이그레이션. Lovable의 인프라가 계속 작동하길 바라는 일은 더 이상 없다.

Vercel 엣지 네트워크

Vercel의 글로벌 엣지 네트워크에 배포하면 모든 PR에 대한 자동 미리보기 배포, 즉시 롤백, 기본 제공 분석 및 적절한 환경 변수 관리를 얻는다. TTFB는 1.2–2.5초에서 300밀리초 미만으로 떨어진다.

타입 안전 데이터 레이어

Subabase CLI를 사용하여 Supabase 스키마에서 직접 TypeScript 타입을 생성한다. 모든 데이터베이스 쿼리는 완전히 입력된다. 모든 API 응답에는 IntelliSense가 있다. 스키마 불일치의 런타임 오류 전체 클래스가 사라진다.

확장 가능한 컴포넌트 아키텍처

당신의 shadcn/ui 컴포넌트와 Tailwind 스타일은 깔끔하게 이월된다. 이미 견고한 추상화다. 우리는 적절한 컴포넌트 계층 구조로 그것들을 재구성한다: 데이터 가져오기용 서버 컴포넌트, 상호작용용 클라이언트 컴포넌트, 중복 코드를 제거하는 공유 레이아웃.

우리의 마이그레이션 프로세스

1단계: 감사 및 아키텍처 (1주차)

우리는 Lovable 코드베이스를 내보내고, 모든 컴포넌트와 경로를 감사하고, Supabase 스키마를 매핑하고, 아키텍처 문서를 생성한다. React Router 경로에서 Next.js App Router 파일 구조로의 경로별 매핑, 어떤 컴포넌트가 서버와 클라이언트가 될지, 완전한 데이터베이스 마이그레이션 계획.

2단계: 인프라 설정 (1–2주차)

우리는 production Supabase 프로젝트를 프로비저닝하고, 적절한 환경 분리(development, preview, production)로 Vercel을 구성하고, GitHub 저장소를 CI/CD로 설정하고, 기존 Tailwind 구성과 shadcn/ui 테마로 Next.js 15 프로젝트를 실행하도록 한다.

3단계: 코드 마이그레이션 (2–3주차)

여기가 실제 작업이 일어나는 곳이다. 우리는 모든 React Router 경로를 적절한 page.tsx, layout.tsx, loading.tsx, error.tsx 파일로 Next.js App Router 페이지로 변환한다. Supabase 클라이언트 호출은 쿠키 기반 인증을 위해 createServerClient를 사용하여 가능한 서버 컴포넌트로 이동한다. 엣지 함수는 사용 케이스에 따라 Next.js API 경로 또는 당신의 자체 프로젝트의 Supabase Edge Functions로 마이그레이션된다.

우리는 마이그레이션 과정에서 AI 생성 코드를 리팩터링한다. 공유 hooks를 추출하고, 중복 로직을 통합하고, 적절한 오류 경계를 추가하고, 의미가 있는 곳에서 낙관적 UI 패턴을 구현한다.

4단계: SEO 및 성능 (3–4주차)

모든 페이지는 Next.js generateMetadata를 통해 적절한 메타데이터를 얻는다. 구조화된 데이터(JSON-LD), Open Graph 태그, 동적 사이트맵 생성, 정규 URL을 추가한다. Lovable 앱이 유기 트래픽을 얻었다면, 우리는 모든 색인된 URL을 보존하기 위해 301 리디렉션을 설정한다.

5단계: 테스트 및 출시 (4주차)

모든 경로의 Lighthouse 감사, Supabase 쿼리 부하 테스트, end-to-end 인증 흐름 검증, Vercel의 트래픽 분할을 사용한 staged rollout. DNS 수준 failover로 zero-downtime cutover 준비 완료.

SEO 보존 전략

Lovable 앱이 어떻게든 검색 순위를 축적했다면(SPA의 가능성은 낮지만, 백링크와 소셜 공유를 통해 가능), 우리는 모든 것을 보존한다:

• URL 패리티: 모든 기존 URL은 동등한 Next.js 경로로 매핑된다. 경로가 변경되는 경우 301 리디렉션이 전환을 처리한다.
• 정규 태그: 마이그레이션 겹침 중 중복 콘텐츠 문제를 방지한다.
• 사이트맵 제출: 출시 직후 Google Search Console에 자동화된 XML 사이트맵이 제출된다.
• 서버 렌더링 메타 태그: 페이지는 최종적으로 JavaScript 실행이 필요 없이 크롤러에 표시되는 실제 <title>, <meta description>, Open Graph 태그를 갖는다.

더 가능성 높은 시나리오: Lovable 앱은 Google이 SPA를 안정적으로 렌더링할 수 없기 때문에 0 유기 가시성을 가진다. 마이그레이션 후에는 처음으로 순위를 얻기 시작한다.

타임라인 및 투자

일반적인 Lovable-to-production 마이그레이션은 복잡도에 따라 3–5주가 걸린다.

• 단순 앱 (5–15개 경로, 기본 Supabase 인증 + CRUD): 3주, $8,000부터
• 중간 앱 (15–40개 경로, 복잡한 RLS 정책, 엣지 함수, real-time subscriptions): 4주, $15,000부터
• 복잡한 앱 (40+개 경로, 다중 테넌트, 복잡한 비즈니스 로직, 제3자 통합): 5+주, $25,000부터

모든 engagement에는 아키텍처 감사, 완전한 코드 마이그레이션, Supabase 프로젝트 설정, Vercel 배포 구성, 30일의 출시 후 지원이 포함된다.

Social Animal이 이 마이그레이션에 필요한 이유

우리는 수년 동안 headless 아키텍처 마이그레이션을 해왔다. Next.js App Router를 안팎으로 알고 있다. Supabase의 인증 모델, RLS 정책, 엣지 함수 제한도 안다. Vercel의 캐싱 동작과 엣지 런타임 제약도 안다.

더 중요하게는, Lovable이 생성하는 것과 어디에서 지름길을 자르는지 안다. 패턴을 봤다: 크기가 큰 클라이언트 컴포넌트, 누락된 오류 상태, 프론트엔드에서만 발생하는 인증 검사. 정확히 무엇을 변경해야 하고 무엇을 유지할 수 있는지 안다.

Lovable 프로토타입이 개념을 증명했다. 우리에게 production 시스템을 구축하도록 하자.