MDX files and Internationalization (i18n)

[figueroaignacio]

Summary

Hello everyone! I'm having a question about internationalization with mdx files.

I'm creating a website with Next.js and Velite (contentlayer alternative), where I write posts and guides about web development and I want it to be in two languages so far (Spanish and English).

Is there any way to traduce the mdx files?

If yes, how?

Additional information

No response

Example

No response

[Juneezee]

A good starting point is to use the next-intl package. You can read their docs page here: https://next-intl-docs.vercel.app/docs/environments/mdx

[figueroaignacio]

Heey, thanks for your answer.

I'm using a contentaler alternative (Velite) that actually works the same.

With this I had to create the collections and I had to create a /content folder where there's the /posts folder with its respectives mdx files.

What should I make to translate those mdx files from the /content/posts folder? That's my main question.

And yeah I'm using next-intl but I don't know how to actually translate the mdx files so if you can help me that would be great.

Cheers 🚀

[Juneezee]

If you are using App Router, then you can follow https://nextjs.org/docs/app/building-your-application/routing/internationalization

This is also shown in the first code block on https://next-intl-docs.vercel.app/docs/environments/mdx, where you have a [locale] (or [lang] etc.) dynamic route ¹:

src
└── app
    └── [locale]
        ├── page.tsx
        ├── en.mdx
        └── de.mdx

You can read the value of [locale] through params ² in page.tsx and load either en.mdx or de.mdx.

Footnotes

1. https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#convention ↩

2. https://nextjs.org/docs/app/api-reference/file-conventions/page#params-optional ↩

[sanne-v]

Documentation of next-intl seems to be behind a pay wall now 😓

https://next-intl-docs.vercel.app/docs/environments/mdx