Just follow their i18n routing guide, create a group and put MDX files of different languages inside
like /en/page.mdx and /cn/page.mdx

and how Can I call thoses? If my page is by default in en-US how can I make it go to the en-US/page.mdx? I tried a lot of things but it is a little complex, thank you for your help

this is how I call my files :
import glob from 'fast-glob'

async function loadEntries(directory, metaName) {
return (
await Promise.all(
(await glob('**/page.mdx', { cwd: src/app/${directory} })).map(
async (filename) => {
let metadata = (await import(../app/${directory}/${filename}))[
metaName
]
return {
...metadata,
metadata,
href: /${directory}/${filename.replace(/\/page\.mdx$/, '')},
}
},
),
)
).sort((a, b) => b.date.localeCompare(a.date))
}

export function loadArticles() {
return loadEntries('blog', 'article')
}

export function loadCaseStudies() {
return loadEntries('work', 'caseStudy')
}

Are you using a dynamic route to render MDX files? Or using the next/mdx one?

dynamic route, I've been able to find the solution finally , I just putted all my pages in the [lang] folder and I've created two folders (en-US and fr) where I skip the routing on them with my middleware

Now I have another issue lol , everything working fine in my localhost but when I deploy in vercel , the mdx are not showing off , I may think that it is becauses of absolute path that are not used with vercel maybe?
I'm sure it is related to my mdx.js:
import glob from 'fast-glob'

async function loadEntries(directory, metaName, lang) {


return (
await Promise.all(
(await glob(${directory}/**/*.mdx, { cwd: src/app/${lang} })).map(
async (filename) => {

console.log(/src/app/${lang}/${filename}); // Log le chemin complet

let metadata = (await import(/src/app/${lang}/${filename}))[metaName];
return {
...metadata,
metadata,
href: /${lang}/${filename.replace(/\/page\.mdx$/, '')},

}
},
),
)
).sort((a, b) => b.date.localeCompare(a.date))
}


export function loadArticles(lang) {
return loadEntries('blog', 'article',lang)
}

export function loadCaseStudies(lang) {
return loadEntries('work', 'caseStudy',lang)
}

Not showing off, is that a not found page, or simply a blank screen?

You can run the production build locally, perhaps you can get some helpful information with it

the build myself works fine , but when I'm deploying in vercel nothing appear it is just blank , no error. I think it is related to the path?

for example in my nextConfig.mjs:
[

new RegExp(^${escapeStringRegexp(path.resolve('@/app/blog'))}),
[[remarkMDXLayout, 'src/app/blog/wrapper', 'article']],

],
[
new RegExp(^${escapeStringRegexp(path.resolve('@/app/fr/work'))}),
[[remarkMDXLayout, '@/app/fr/work/wrapper', 'caseStudy']],
],
[
new RegExp(^${escapeStringRegexp(path.resolve('@/app/en-US/work'))}),
[[remarkMDXLayout, '@/app/en-US/work/wrapper', 'caseStudy']],

I tried to resolve path differents ways but It is still not working

it's pretty much a problem with your code if it's just blank, you need to provide more information including a repo

I've made the repo public:
https://github.com/DonTizi/TricotsMelbouci

I'm playing with mdx.js I'm pretty sure it does not recognize the path for the wrapper in vercel

vercel just told me to see this doc: https://vercel.com/guides/how-can-i-use-files-in-serverless-functions

but I'm not very familiar with it..

normally your site is built statically, and your MDX files are available during build time

once the build is shipped, all MDX files no longer exist