meta: updated next-intl and dependent packages (nodejs#6130)

* meta: updated next-intl and dependent packages

* Update i18n.tsx

Signed-off-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>

---------

Signed-off-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
Co-authored-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>

i18n.tsx

@@ -1,11 +1,36 @@
 import type { RichTranslationValues } from 'next-intl';
 import { getRequestConfig } from 'next-intl/server';
 
-export const defaultRichTextValues: RichTranslationValues = {
+import { availableLocaleCodes } from './next.locales.mjs';
+
+// Loads the Application Locales/Translations Dynamically
+const loadLocaleDictionary = async (locale: string) => {
+ if (locale === 'en') {
+ // This enables HMR on the English Locale, so that instant refresh
+ // happens while we add/change texts on the source locale
+ return import('./i18n/locales/en.json').then(f => f.default);
+ }
+
+ if (locale in availableLocaleCodes) {
+ // Other languages don't really require HMR as they will never be development languages
+ // so we can load them dynamically
+ return import(`./i18n/locales/${locale}.json`).then(f => f.default);
+ }
+
+ throw new Error(`Unsupported locale: ${locale}`);
+};
+
+// Defines default Rich Text Components
+const defaultRichTextValues: RichTranslationValues = {
  graySpan: c => <span className="small color-lightgray">{c}</span>,
 };
 
+// Provides `next-intl` configuration for RSC/SSR
 export default getRequestConfig(async ({ locale }) => ({
- messages: (await import(`./i18n/locales/${locale}.json`)).default,
+ // This is the dictionary of messages to be loaded
+ messages: await loadLocaleDictionary(locale),
+ // Default Rich Text Translations
+ defaultTranslationValues: defaultRichTextValues,
+ // We always define the App timezone as UTC
  timeZone: 'Etc/UTC',
 }));

layouts/DocsLayout.tsx

@@ -14,15 +14,11 @@ const DocsLayout: FC<PropsWithChildren> = ({ children }) => {
  apiLts: {
  ltsNodeVersion: lts ? `v${lts.major}.x` : undefined,
  fullLtsNodeVersion: lts ? lts.versionWithPrefix : undefined,
- graySpan: c => <span className="small color-lightgray">{c}</span>,
  },
  apiCurrent: {
  fullCurrentNodeVersion: current ? current.versionWithPrefix : undefined,
  currentNodeVersion: current ? `v${current.major}.x` : undefined,
  },
- guides: {
- graySpan: c => <span className="small color-lightgray">{c}</span>,
- },
  };
 
  return (