Sai lầm lớn nhất: Tại sao bạn nên triển khai i18n cho Next.js ngay từ ngày đầu tiên

Sai lầm lớn nhất: Tại sao bạn nên triển khai i18n cho Next.js ngay từ ngày đầu tiên

Tôi đã xây dựng một ứng dụng chia tiền hóa đơn gọi là FAMI-KAN (ban đầu dành cho thị trường Nhật Bản) sử dụng Next.js 15 App Router và Supabase. Vì tôi xây dựng nó chủ yếu thông qua phương pháp "Vibe Coding" (lập trình tương tác lặp đi lặp lại với các tác nhân AI như Claude/Gemini), tốc độ phát triển tính năng nhanh đến mức khó tin. Tôi hoàn toàn không có kinh nghiệm lập trình chuyên nghiệp nào, nhưng AI đã cho phép tôi tạo ra một sản phẩm hoàn chỉnh. Tôi từng nghĩ mình là một thiên tài.

Sau đó, X (Twitter) mở rộng tính năng đa ngữ. Đột nhiên, lượng truy cập toàn cầu trở thành khả năng thực sự. Tôi nhận ra: Nếu người dùng từ khắp nơi trên thế giới nhấp vào liên kết ứng dụng của tôi từ X và chỉ nhìn thấy tiếng Nhật, hành trình trải nghiệm người dùng của họ sẽ bị phá vỡ hoàn toàn.

Vì vậy, tôi quyết định dịch ứng dụng của mình sang 8 ngôn ngữ. "Chắc sẽ dễ dàng với AI chứ?", tôi nghĩ.

Tôi đã lầm to. Việc không xây dựng tính năng i18n (internationalization - quốc tế hóa) với thư viện next-intl ngay từ ngày đầu tiên là sai lầm lớn nhất của dự án này. Kể cả khi có sức mạnh của Vibe Coding, việc di chuyển một codebase khổng lồ đã có sẵn thực sự là địa ngục trần gian.

Dưới đây là câu chuyện về cách tôi sống sót qua quá trình di chuyển, những giới hạn bất ngờ của AI trong quy trình này, và cách mọi thứ finalement đã được giải quyết.

Cơn ác mộng: Component dài 5.000 dòng

Vào những ngày đầu, tôi không tách văn bản UI (giao diện) thành các từ điển JSON. Tôi chỉ nhúng trực tiếp các chuỗi tiếng Nhật vào các component. Trang chi tiết sự kiện chính của tôi (page.tsx) đã phình to đến hơn 5.000 dòng mã React phức tạp và chứa nhiều trạng thái (state).

Lần thử đầu tiên của tôi: Tôi yêu cầu tác nhân AI: "Tìm tất cả văn bản tiếng Nhật trong file 5.000 dòng này và thay thế nó bằng useTranslations()."

Sự thất bại của AI: AI đã hoàn toàn sụp đổ. Nó va phải giới hạn cửa sổ ngữ cảnh (context window), cắt ngắn đầu ra, và tạo ra các biến ảo (hallucinated variables). Ứng dụng thậm chí không thể biên dịch được.

Giải pháp: Tôi phải ngừng treating AI như một đũa thần. Thay vì yêu cầu AI viết lại trực tiếp component React, tôi yêu cầu AI viết một script thay thế AST (Abstract Syntax Tree - Cây cú pháp trừu tượng) bằng Node.js. Tôi chạy script này cục bộ để trích xuất và thay thế an toàn các chuỗi bằng t('...') theo từng phần. Bài học rút ra: Đừng để AI chỉnh sửa trực tiếp các tệp khổng lồ; hãy để AI viết công cụ để chỉnh sửa chúng.

Sống sót với Next.js 15: "Bẫy kiến thức lỗi thời"

Việc chọn thư viện dịch thuật là một rào cản khác. Tôi chọn next-intl vì sự hỗ trợ của nó cho App Router. Tuy nhiên, cách tiếp cận Vibe Coding của tôi đã va phải một bức tường gạch.

Sự thất bại của AI: Hầu hết các mô hình AI được đào tạo trên dữ liệu đến năm 2023 hoặc đầu năm 2024. Next.js 15 đã đưa ra một quy tắc nghiêm ngặt mới: params trong các định tuyến động (như [locale]) phải là một Promise. AI liên tục tạo ra mã code cũ của Next.js 14 (params.locale), khiến trình biên dịch (tsc --noEmit) "la hét" với vô số lỗi.

Giải pháp: Với tư cách là một người không phải lập trình viên, tôi không biết cách sửa nó bằng cách đọc tài liệu chính thức. Thay vào đó, tôi phải sao chép và dán một cách mù quáng các lỗi biên dịch giận dữ trả lại cho AI, hết lần này đến lần khác, buộc AI phải tự sửa chữa và cập nhật bối cảnh của chính nó thông qua "vũ lực". Bài học rút ra: Vibe Coding rất tuyệt vời, nhưng kiến thức lỗi thời của AI sẽ khiến bạn phải vật lộn với trình biên dịch hiện đại.

Bảo vệ SEO đã dày công xây dựng

Một trong những nỗi sợ lớn nhất của tôi là phá hủy SEO mà tôi đã xây dựng cho thị trường Nhật Bản.

Nếu tôi thay đổi cấu trúc URL gốc, các trang đã được lập chỉ mục và các backlink từ blog sẽ chết. Tôi đã chỉ thị rõ ràng cho AI: "Đừng chạm vào cấu trúc định tuyến hiện có cho tiếng Nhật. Chỉ thêm /en/ hoặc /es/ làm thư mục con cho các ngôn ngữ khác."

Nhờ middleware của next-intl, tôi đã đạt được điều này. Gốc / vẫn giữ nguyên là tiếng Nhật (bảo vệ SEO), trong khi /en/ xử lý lưu lượng truy cập tiếng Anh mới. Ngoài ra, AI còn giúp tôi xây dựng một sitemap.ts động để xuất các thẻ hreflang một cách chính xác.

Địa phương hóa (Localization) > Dịch thuật (Khi AI trở nên quá sáng tạo)

Ứng dụng của tôi tạo ra dữ liệu mẫu (demo) cho người dùng mới lần đầu. Trong tiếng Nhật, sự kiện demo là "Chuyến đi của gia đình Tabei đến Okinawa".

Vấn đề dịch thuật: Nếu tôi chỉ dịch nghĩa đen, người dùng tiếng Anh sẽ thấy "Chuyến đi đến Okinawa". Chắc chắn, họ có thể biết Tokyo hoặc Kyoto, nhưng Okinawa không thực sự gần gũi với mọi người trên toàn cầu.

Giải pháp (Cú tạt bất ngờ của AI): Tôi bảo AI: "Hãy làm cho dữ liệu demo tự nhiên hơn cho người dùng toàn cầu." Tôi mong đợi nó chỉ dùng "Chuyến đi Tokyo" hoặc "Chuyến đi Kyoto". Nhưng gây ngạc nhiên cho tôi, AI đã chuyển sang chế độ địa phương hóa hoàn toàn. Nó quyết định viết lại hoàn toàn ngữ cảnh demo cho mỗi ngôn ngữ!

• Phiên bản Tây Ban Nha: "Chuyến đi của gia đình Garcia đến Cancún"
• Phiên bản Pháp: "Chuyến đi của gia đình Martin đến Nice"
• Phiên bản Hindi: "Chuyến đi của gia đình Sharma đến Shimla"

Thật thú vị khi AI đã hoàn toàn bỏ qua bối cảnh tiếng Nhật ban đầu của tôi, nhưng thành thật mà nói, đó là một nước đi đúng đắn. Mức độ thấu cảm văn hóa này khiến ứng dụng trở nên quen thuộc như bản địa với người dùng trên khắp thế giới.

Thêm bớt: Địa phương hóa cho AI Crawler (llms.txt)

Cuối cùng, chúng ta đang sống trong kỷ nguyên của Generative Engine Optimization (GEO - Tối ưu hóa cho công cụ tạo sinh). Người dùng không chỉ tìm kiếm trên Google; họ đang hỏi ChatGPT và Gemini.

Tôi không chỉ dịch giao diện UI. Tôi đã chỉ đạo AI tạo ra tệp /en/llms.txt và /en/llms-full.txt cho các trình thu thập dữ liệu AI tiếng Anh. Bây giờ, khi một người dùng tiếng Anh hỏi AI: "Ứng dụng nào tốt để chia chi phí du lịch dựa trên tỷ lệ?", AI sẽ có ngữ cảnh markdown được bản địa hóa sang tiếng Anh để đọc và đề xuất ứng dụng của tôi.

Kết luận

Nếu bạn đang bắt đầu một dự án Next.js mới ngày hôm nay, hãy đưa next-intl vào ngay từ Ngày 1. Kể cả khi bạn chỉ hỗ trợ ngôn ngữ mẹ đẻ của mình. Việc hardcode các chuỗi văn bản sẽ trừng phạt bạn sau này.

Vibe coding thực sự là một năng lực siêu phàm. Nó đã cho phép tôi — một nhà phát triển đơn lẻ với nền tảng zero lập trình — đẩy ra một bản cập nhật lớn 8 ngôn ngữ chỉ trong vài ngày. Nhưng AI vẫn có những giới hạn của nó, từ cửa sổ ngữ cảnh đến kiến thức framework lỗi thời.

Nếu bạn thấy câu chuyện này hữu ích, bạn có thể xem FAMI-KAN tại đây. Tôi cũng sẽ ra mắt trên Product Hunt vào đầu tháng tới, vì vậy mọi phản hồi về giao diện tiếng Anh sẽ được đánh giá rất cao!

(Bạn có thể tìm thấy tôi đang xây dựng công khai trên X tại @vibe_archi)