내 가장 큰 실수: 왜 당신은 Day One부터 Next.js 앱을 i18n 해야 할까 (Vibe Coding 생존 가이드)

Source: Dev.to

I built a split‑bill application called FAMI‑KAN (originally for the Japanese market) using Next.js 15 App Router and Supabase. Since I built it mostly through Vibe Coding (coding iteratively with AI agents like Claude/Gemini), feature development was incredibly fast. I have absolutely zero professional programming experience, yet AI allowed me to build a fully functional product. I thought I was a genius.

Then, X (Twitter) expanded its multilingual features. Suddenly, global traffic was a real possibility. I realized:

If people from around the world click my app link from X and see only Japanese, my user journey is completely broken.

So, I decided to translate my app into 8 languages.

“It should be easy with AI, right?” I thought.

I was dead wrong.

Not building with i18n (next-intl) from Day 1 was the biggest mistake of this project. Even with the power of Vibe Coding, migrating an existing, monolithic codebase was pure hell. Below is the story of how I survived the migration, the unexpected limits of AI in this process, and how it worked out in the end.

악몽: 5,000‑줄 컴포넌트

시작할 때, 나는 UI 텍스트를 JSON 사전으로 분리하지 않았다. 일본어 문자열을 컴포넌트에 직접 하드코딩했다. 메인 이벤트 상세 페이지(page.tsx)는 복잡하고 상태가 많은 React 코드가 5,000줄 이상으로 부풀어 올랐다.

첫 번째 시도

AI 에이전트에게 물었다:

“Find all Japanese text in this 5,000‑line file and replace it with useTranslations().”

AI의 실패

AI는 완전히 무너졌다. 컨텍스트‑윈도우 제한에 걸리고, 출력이 잘리며, 변수를 환상적으로 만들어냈다. 앱조차 컴파일되지 않았다.

해결책

나는 AI를 마법 지팡이처럼 대하는 것을 멈춰야 했다.

AI에게 React 컴포넌트를 직접 다시 쓰라고 요청하는 대신, Node.js AST (추상 구문 트리) 교체 스크립트를 작성해 달라고 요청했다. 그 스크립트를 로컬에서 실행해 문자열을 안전하게 t('…') 로 청크 단위로 추출하고 교체했다.

배운 교훈: AI에게 대용량 파일을 직접 편집하도록 하지 말고, AI가 파일을 편집할 도구를 작성하도록 하라.

Surviving Next.js 15: The “Knowledge Cutoff” Trap

Choosing a translation library was another hurdle. I went with next-intl because of its App Router support. However, my Vibe Coding approach hit a brick wall.

The AI’s Failure

Most AI models are trained on data up to 2023 or early 2024. Next.js 15 introduced a strict new rule: params in dynamic routes (like [locale]) must be a Promise. The AI kept generating old Next.js 14 code (params.locale), causing the compiler (tsc --noEmit) to scream at me with endless errors.

The Solution

As a non‑programmer, I didn’t know how to fix it by reading the official docs. Instead, I had to blindly copy‑paste the angry compiler errors back to the AI, over and over, forcing the AI to self‑correct and update its own context through brute force.

Lesson learned: Vibe Coding is amazing, but AI’s outdated knowledge will make you fight the modern compiler.

내 힘들게 얻은 SEO 보호하기

내가 가장 두려워했던 것 중 하나는 일본 시장을 위해 구축한 SEO가 파괴되는 것이었습니다.

루트 URL 구조를 변경하면 기존에 색인된 페이지와 블로그에서 온 백링크가 사라질 것입니다. 저는 AI에게 명확히 지시했습니다:

“일본어에 대한 기존 라우팅 구조는 건드리지 마세요. 다른 언어를 위해서는 /en/ 또는 /es/ 서브디렉터리만 추가하세요.”

next-intl의 미들웨어 덕분에 이를 구현할 수 있었습니다. 루트 /는 일본어를 유지해 SEO를 보호하고, /en/은 새로운 영어 트래픽을 처리합니다. 또한 AI는 hreflang 태그를 올바르게 출력하도록 동적 sitemap.ts를 만드는 데 도움을 주었습니다.

Source:

현지화 > 번역 (AI가 너무 창의적이었을 때)

내 앱은 첫 번째 사용자를 위해 샘플 데모 데이터를 생성합니다.

일본어에서는 데모 이벤트가 “타베이 가족의 오키나와 여행” 이었습니다.

번역 문제

그냥 직역한다면 영어 사용자는 “오키나와 여행” 을 보게 됩니다. 도쿄나 교토는 알겠지만, 오키나와는 전 세계 모든 사람에게 친숙하지 않을 수 있습니다.

해결책 (AI의 놀라운 작전)

나는 AI에게 다음과 같이 말했습니다:

“데모 데이터를 전 세계 사용자에게 더 자연스럽게 만들어 주세요.”

나는 AI가 “도쿄 여행”이나 “교토 여행” 정도만 사용할 것이라고 기대했지만, 놀랍게도 AI는 완전한 현지화 모드에 들어갔습니다. 각 언어마다 데모 컨텍스트를 완전히 새롭게 작성했습니다!

AI가 원래 일본어 컨텍스트를 완전히 무시한 것이 웃겼지만, 솔직히 올바른 선택이었습니다. 이런 수준의 문화적 공감은 앱을 전 세계 사용자에게 현지화된 느낌을 주게 합니다.

보너스: AI 크롤러를 위한 현지화 (llms.txt)

마침내 우리는 Generative Engine Optimization (GEO) 시대에 접어들었습니다. 사용자는 이제 구글만 검색하는 것이 아니라 ChatGPT와 Gemini에 질문을 합니다.

저는 UI만 번역한 것이 아니라, AI가 사용할 수 있도록 영어 AI 크롤러용 /en/llms.txt와 /en/llms‑full.txt 파일을 만들도록 AI에게 지시했습니다. 이제 영어 사용자가 AI에게 “비율에 따라 여행 비용을 나누는 좋은 앱이 뭐야?” 라고 물으면, AI는 직접 읽고 내 앱을 추천할 수 있는 영어 현지화 마크다운 컨텍스트를 갖게 됩니다.

결론

오늘 새로운 Next.js 프로젝트를 시작한다면, Day 1부터 next-intl을 넣으세요—비록 모국어만 지원하더라도. 문자열을 하드코딩하면 나중에 큰 불이익을 받게 됩니다.

Vibe 코딩은 놀라운 슈퍼파워입니다. 프로그래밍 배경이 전혀 없는 저 혼자 개발자가 며칠 만에 8개 언어에 걸친 대규모 업데이트를 추진할 수 있게 해주었습니다. 하지만 AI에도 한계가 있습니다. 컨텍스트 윈도우 제한부터 오래된 프레임워크 지식까지 말이죠.

이 이야기가 도움이 되었다면 FAMI‑KAN을 여기에서 확인해 보세요. 다음 달 초에 Product Hunt에 출시할 예정이니, 영어 UI에 대한 피드백을 주시면 크게 감사하겠습니다!

X에서 @vibe_archi로 공개적으로 개발하는 모습을 찾아볼 수 있습니다.