Adding individual json file for each page

[Ali-0111]

Greetings, @amannn
Is there any solution for now to add namespaces for each page in a separated file. right now, in any page we are navigating, we are request a locale.json file. This file include all written messages withing app(all pages).
It was good if there was an option to place each page messages individually and get only related messages for active page on client side.

Big concern: The number of lines writing messages extremely extended and the chunk size for this json file also increased to send for the client browser.

reference: request.ts

import { getRequestConfig } from "next-intl/server";
import { hasLocale } from "next-intl";
import { routing } from "./routing";

export default getRequestConfig(async ({ requestLocale }) => {
  // Typically corresponds to the `[locale]` segment
  const requested = await requestLocale;
  const locale = hasLocale(routing.locales, requested)
    ? requested
    : routing.defaultLocale;

  return {
    locale,
    messages: (await import(`./messages/${locale}.json`)).default,
  };
});

Describe the solution you'd like

There should be a chance to add:

├── en/
│   ├── home.json
│   └── about.json
└── fr/
    ├── home.json
    └── about.json

Summary:
when user is using About page, we can we send only about.json messages ?

Describe alternatives you've considered

.

[talatkuyuk]

+1 (individual json file for each page like next-translate),
for example, i18.json:

{
  "locales": ["en", "fr"],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"],
    "/": ["home"],
    "/about": ["about", "footer"],
    "/pricing": ["pricing", "footer"],
    "/blog": ["blog"],
    "/blog/[slug]": ["blog"],
    "/blog/tags/[tag]": ["blog"],
  }
}

├── en/
│   ├── common.json
│   └── home.json
│   └── // ... and others
└── fr/
    ├── common.json
    └── home.json
    └── // ... and others

[CarrettaRiccardo]

You can currently do that with a bit of hardcode and manually exporting the json values:

• by placing translations in the folder src/messages/dictionaries/<locale>/<file>.json

• init.js

  type DictionaryKeys = "buttons"
    | "miscellaneous"
    | "prompt"
    | "pageHome";
  
  type Dictionaries = {
    buttons: typeof import("../messages/dictionaries/en/buttons.json");
    miscellaneous: typeof import("../messages/dictionaries/en/miscellaneous.json");
    prompt: typeof import("../messages/dictionaries/en/prompt.json");
    pageHome: typeof import("../messages/dictionaries/en/pageHome.json");
  };
  
  const keys: DictionaryKeys[] = [
    "buttons",
    "miscellaneous",
    "prompt",
    "pageHome"
  ];
  
  async function loadDictionaries(locale: "en" | "it"): Promise<Dictionaries> {
    const imports = await Promise.all(
      keys.map((key) =>
        import(`../messages/dictionaries/${locale}/${key}.json`).then((mod) => mod.default)
      )
    );
    return Object.fromEntries(keys.map((key, i) => [key, imports[i]])) as Dictionaries;
  }
  
  async function initI18nEN() {
    return loadDictionaries("en");
  }
  
  async function initI18nIT() {
    return loadDictionaries("it");
  }
  
  export { initI18nEN, initI18nIT };

• request.ts

  export default getRequestConfig(async ({ requestLocale }) => {
      // Typically corresponds to the `[locale]` segment
      const requested = await requestLocale;
      const locale = hasLocale(i18n.locales, requested)
          ? requested
          : i18n.defaultLocale;
  
      return {
          locale,
          formats,
          onError,
          getMessageFallback,
          now: new Date(),
          timeZone: timeZone,
          // Hard coded for type safety
          messages: locale === "it" ? await initI18nIT() : await initI18nEN(),
      };
  });

• for types:
  global.d.ts

  import { initI18nEN } from "./i18n/init";
  
  type Messages = Awaited<ReturnType<typeof initI18nEN>>;

[CarrettaRiccardo]

But i agree the library should be able to handle separated translations natively in a better way, also without having to manually add each single file to some kind of list.

For example, i like intlayer's approach, which moves dictionaries to a <name>.content.ts file, which can be "built" providing all translations project-wise.

Also check out:

• Possible to use multiple message files per one locale? #357 (comment)
• https://github.com/HPouyanmehr/next-intl-split

[Ali-0111]

@CarrettaRiccardo, Thanks. yes, I fully agree you. at the end of the day we can only merge the files but it is important to get local messages only by page not by locale as now.

[amannn]

This is intended to be solved as part of #1. I'm looking to find time to start working on that in the coming months!

[Ali-0111]

Thanks, @amannn , see you with new updates.

[amannn]

Ok, let me close this as a duplicate of #1 then!