Merge pull request #9035 from weseek/imprv/150556-152730-translation-modification

imprv: translation modification

apps/app/src/pages/_app.page.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect } from 'react';
 
+import type { Locale } from '@growi/core';
 import type { NextPage } from 'next';
 import { appWithTranslation } from 'next-i18next';
 import type { AppContext, AppProps } from 'next/app';
@@ -29,7 +30,7 @@ export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
 
 type GrowiAppProps = AppProps & {
   Component: NextPageWithLayout,
-  userLocale: string,
+  userLocale: Locale,
 };
 
 // register custom serializer

apps/app/src/pages/_document.page.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @next/next/google-font-display */
 import React from 'react';
 
+import type { Locale } from '@growi/core';
 import type { DocumentContext, DocumentInitialProps } from 'next/document';
 import Document, {
   Html, Head, Main, NextScript,
@@ -43,7 +44,7 @@ interface GrowiDocumentProps {
   customCss: string | null,
   customNoscript: string | null,
   pluginResourceEntries: GrowiPluginResourceEntries;
-  locale: string;
+  locale: Locale;
 }
 declare type GrowiDocumentInitialProps = DocumentInitialProps & GrowiDocumentProps;
 

apps/app/src/pages/utils/commons.ts

@@ -1,5 +1,5 @@
-import type { ColorScheme, IUserHasId } from '@growi/core';
-import { Lang, AllLang, Locale } from '@growi/core';
+import type { ColorScheme, IUserHasId, Locale } from '@growi/core';
+import { Lang, AllLang } from '@growi/core';
 import { DevidedPagePath } from '@growi/core/dist/models';
 import { isServer } from '@growi/core/dist/utils';
 import type { GetServerSideProps, GetServerSidePropsContext } from 'next';
@@ -110,18 +110,24 @@ export type LangMap = {
 };
 
 export const langMap: LangMap = {
-  [Lang.ja_JP]: Locale['ja-JP'],
-  [Lang.en_US]: Locale['en-US'],
-  [Lang.zh_CN]: Locale['zh-CN'],
-  [Lang.fr_FR]: Locale['fr-FR'],
-};
-
-export const getLocaleAtServerSide = (req: CrowiRequest): Locale => {
+  [Lang.ja_JP]: 'ja-JP',
+  [Lang.en_US]: 'en-US',
+  [Lang.zh_CN]: 'zh-CN',
+  [Lang.fr_FR]: 'fr-FR',
+} as const;
+
+// use this function to translate content
+export const getLangAtServerSide = (req: CrowiRequest): Lang => {
   const { user, headers } = req;
   const { configManager } = req.crowi;
 
-  return langMap[user == null ? detectLocaleFromBrowserAcceptLanguage(headers)
-    : (user.lang ?? configManager.getConfig('crowi', 'app:globalLang') as Lang ?? Lang.en_US) ?? Lang.en_US];
+  return user == null ? detectLocaleFromBrowserAcceptLanguage(headers)
+    : (user.lang ?? configManager.getConfig('crowi', 'app:globalLang') as Lang ?? Lang.en_US) ?? Lang.en_US;
+};
+
+// use this function to get locale for html lang attribute
+export const getLocaleAtServerSide = (req: CrowiRequest): Locale => {
+  return langMap[getLangAtServerSide(req)];
 };
 
 export const getNextI18NextConfig = async(
@@ -135,7 +141,7 @@ export const getNextI18NextConfig = async(
 
   // determine language
   const req: CrowiRequest = context.req as CrowiRequest;
-  const locale = getLocaleAtServerSide(req);
+  const lang = getLangAtServerSide(req);
 
   const namespaces = ['commons'];
   if (namespacesRequired != null) {
@@ -146,7 +152,8 @@ export const getNextI18NextConfig = async(
     namespaces.push('translation');
   }
 
-  return serverSideTranslations(locale, namespaces, nextI18NextConfig, preloadAllLang ? AllLang : false);
+  // The first argument must be a language code with an underscore, such as en_US
+  return serverSideTranslations(lang, namespaces, nextI18NextConfig, preloadAllLang ? AllLang : false);
 };
 
 /**

packages/core/src/interfaces/locale.ts

@@ -1,8 +1 @@
-export const Locale = {
-  'en-US': 'en-US',
-  'ja-JP': 'ja-JP',
-  'zh-CN': 'zh-CN',
-  'fr-FR': 'fr-FR',
-} as const;
-export const AllLocale = Object.values(Locale);
-export type Locale = typeof Locale[keyof typeof Locale];
+export type Locale = 'en-US' | 'ja-JP' | 'zh-CN' | 'fr-FR';