05/06/2026 · Next.js
Chuyển portfolio Next.js sang song ngữ
Cách mình thêm bản tiếng Việt (mặc định) và tiếng Anh cho portfolio Next.js xuất tĩnh trên GitHub Pages: route /en, hreflang và nội dung MDX hai ngôn ngữ.
Vì sao cần song ngữ
Phần lớn nhà tuyển dụng mình gửi CV là người Việt, trong khi portfolio trước đây chỉ có tiếng Anh. Mình muốn bản tiếng Việt là mặc định, còn bản tiếng Anh vẫn giữ để gửi khi cần.
Cách làm
- Đường dẫn: tiếng Việt ở gốc (
/,/projects/...), tiếng Anh thêm/enphía trước. - Nội dung: mỗi dự án có
index.mdx(tiếng Anh) vàindex.vi.mdx(tiếng Việt) trong cùng thư mục, dùng chung ảnh. Velite đọc tên file để gắn ngôn ngữ. - Giao diện: chữ trên menu, nút và tiêu đề mục nằm trong một file từ điển cho hai ngôn ngữ.
- SEO: mỗi trang có
hreflangchovivàen, cùngcanonicalriêng.
Lưu ý với static export
Site xuất tĩnh (output: "export") nên không dùng được middleware để đoán ngôn ngữ. Mình dùng nút EN / VI để chuyển sang đúng trang tương ứng, và thêm một bước sau build để GitHub Pages mở được /en.