Is there any way to access `__filename` in Next.js?

Issue

I'm working on a custom i18n module and would love to replace this code (this is a an "about-us" page):

  const messages = (await import(`./about-us.${locale}.json`))
    .default as Messages;

By

  const messages = (
    await import(`./${__filename.replace('.tsx', `.${locale}.json`)}`)
  ).default as Messages;

Unfortunately __filename resolves to /index.js (I guess because of Webpack?) - is there any way to achieve what am I trying to do in my example or this would need to be built-in Next.js directly to work?

Solution

After a long search, the solution was to write a useMessages hook that would be "injected" with the correct strings using a custom Babel plugin.

A Webpack loader didn't seem like the right option as the loader only has access to the content of the file it loads. By using Babel, we have a lot more options to inject code into the final compiled version.

Answered By - Nicolas Bouvrette