ℹ️ Update - 25/01/2022: While the approach here works just fine and is up to date, I found the value it brings is little compared to the cost of implementing this. If your audience is really in several languages, there could be easier ways to tackle the problem.

How such a simple solution, escaped me for quite some time is something that I am still figuring out. What I know almost for certain is there are not many people with their blog in several languages, using internazionalization, or more rarely commonly known as multilingual blog.

This was more a challenge, rather than a real requirement for me, to the date I have little to no content to share, why would I even need another language? Well it all started with the following idea: Let’s use next, and a couple of Markdown files to put together a website for my wedding 🤔. As it turns out, I didn’t find this so simple back then, so I went ahead and built the whole web app as I already knew how to.

Once that was done, and I had some time to focus on solving the original problem, here is what my requirements looked like and how I did it.

What do we want to achieve?

• [x] Blog page that lists entries by language
• [x] Route that shows blog entries by slug reading from local .md files
• [x] Language switch that redirects automatically to the alternate route.
  • [x] This must be achieved without manual intervention. If there is a file, with the same slug in a diferent locale location. That one must be served.
• [x] If article does not exist in that language
  • [x] show 404 Not Found
  • [x] and display available language when trying to access the slug.
• [x] (optional) List available languages for clicking on the side page

Here is the folder structure we will be looking at, paying special attention to those pointed out 👈

$ miguel > tree -L 3 . 
├── data
│   └── blog
│       ├── en
│       │   ├── my-first-post.mdx
│       │   └── test-post.mdx
│       └── es
│           └── test-post.mdx
└── src     ├── components     
│   ├── ...     
│   └── ...     
├── layouts     
│   └── blog.tsx 👈     
├── lib     
│   └── mdx.ts 👈     
└── pages         
├── _app.tsx         
├── _document.tsx         
├── blog         
│   └── [slug].tsx 👈         
├── blog.tsx 👈         
└── index.tsx

To summarize

• /src/layouts/blog.tsx contains the layout for the blog components
• /src/lib/mdx.ts contains helper functions that will serve us to retrieve files when the code executes on the server
• /src/pages/blog.tsx contains the actual page that will list the blog entries
• /src/pages/blog/[slug].tsx will be the actual blog post page using dynamic routing.