Next Translate stops working with `pageExtensions`

Hello guys,

Thank you for your awesome plugin.

I am trying to use your plugin with pageExtensions from NextJS (https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions). This is due to the fact that we want to build only certain pages, for different use cases. For example, we will have some pages for admin users, and some pages for simple users. And we will deploy these pages on different hosts, but we will also have some use cases where we’ll need both the pages for admin and users to be built. For this, we have decided to rename our pages from pageName.js (example: /admin/search.js) to pageName.userType.js (example: /admin/search.admin.js) and inside our next.config.js we specify using the pageExtensions which types of pages to be built (example: pageExtensions: ["admin.js"]). When doing this, the internationalization fails to load.

I’ve created here a reproduction repo: https://github.com/einazare/next-translate-demo When you start it and navigate to http://localhost:3000/admin/search or http://localhost:3000/ro/admin/search, you will see that {t("admin-search:input")} will display admin-search:input instead of the value of that i18n variable, which is Hey input or Salut intrare. The start the project, you can run in your terminal the following command:

• linux/mac: npm run install && npm run dev
• windows: npm run install ; npm run dev

I’ve tried using the extensionsRgx that you guys offer, but it doesn’t work either. I’ve tried using it like extensionsRgx: /\.(admin|user)\.(js)$/.

Do you guys have any idea what am I doing wrong?

Live long and prosper, 🖖 Manu

[kuus]

Actually @einazare after my comment I tried to use this library and it works with pageExtensions, here’s my i18n.js in the project’s root folder:

module.exports = {
  locales: ["nl"],
  defaultLocale: "nl",
  extensionsRgx: /\.page\.(tsx|ts|js|mjs|jsx)$/,
  loadLocaleFrom: (locale, namespace) =>
    import(`./public/locales/${locale}/${namespace}.json`).then(
      (m) => m.default
    ),
  pages: {
    "*": ["common", "Header", "Footer"],
    "/": ["home"],
    "/article/[slug]": ["Article"],
    "rgx:^/articles": ["articles"]
  },
};

This is the bit of your interest:

  extensionsRgx: /\.page\.(tsx|ts|js|mjs|jsx)$/,

[kuus]

Hi @aralroca a small thing missing is the extensionsRgx key in the I18nConfig interface: https://github.com/vinissimus/next-translate/blob/master/src/index.tsx#L48-L67 maybe you can add it in next release, thanks in advance 😃!