Jun 05, 2026 · Next.js
Making my Next.js portfolio bilingual
How I added Vietnamese (default) and English versions to a statically exported Next.js portfolio on GitHub Pages: /en routes, hreflang and bilingual MDX content.
Why bilingual
Most recruiters I send my CV to are Vietnamese, while my portfolio used to be English only. I wanted Vietnamese as the default and kept English for when I need it.
How it works
- URLs: Vietnamese lives at the root (
/,/projects/...); English adds an/enprefix. - Content: each project has
index.mdx(English) andindex.vi.mdx(Vietnamese) in the same folder, sharing images. Velite reads the file name to tag the language. - UI: menu, button and section labels live in one dictionary file for both languages.
- SEO: every page has
hreflangforvianden, plus its owncanonical.
Static export notes
The site is statically exported (output: "export"), so there is no middleware to detect the language. An EN / VI button links to the matching page, and a post-build step lets GitHub Pages serve /en.