[optimize] i18n SEO based on URL parameter (fix idea2app/MobX-i18n#9)

Author: TechQuery

models/Translation.ts

@@ -1,8 +1,11 @@
 import {
   loadLanguageMapFrom,
+  parseCookie,
   TranslationMap,
   TranslationModel,
 } from 'mobx-i18n';
+import { DataObject } from 'mobx-restful';
+import { NextPageContext } from 'next';
 import { createContext } from 'react';
 
 import zhCN from '../translation/zh-CN';
@@ -43,4 +46,27 @@ export const LanguageName: Record<LanguageCode, string> = {
 
 export const I18nContext = createContext(i18n);
 
-export const loadSSRLanguage = loadLanguageMapFrom.bind(null, i18nData);
+export const parseSSRContext = <T extends DataObject = DataObject>(
+  { req, query }: NextPageContext,
+  queryKeys: (keyof T)[] = [],
+) => {
+  const cookie = parseCookie(req?.headers.cookie || '') as T;
+
+  for (const key of queryKeys)
+    cookie[key] =
+      (query[key as string]?.toString().split(',')[0] as T[keyof T]) ||
+      cookie[key];
+
+  return cookie;
+};
+
+export const loadSSRLanguage = (context: NextPageContext) => {
+  const { headers } = context.req || {},
+    { language } = parseSSRContext(context, ['language']);
+  const header = {
+    ...headers,
+    ...(language ? { cookie: `language=${language}` } : {}),
+  };
+
+  return loadLanguageMapFrom(i18nData, header);
+};

package.json

@@ -32,7 +32,7 @@
     "lodash": "^4.17.21",
     "mobx": "^6.13.7",
     "mobx-github": "^0.3.5",
-    "mobx-i18n": "^0.7.0",
+    "mobx-i18n": "^0.7.1",
     "mobx-react": "^9.2.0",
     "mobx-react-helper": "^0.3.6",
     "mobx-restful": "^2.1.0",

pages/_app.tsx

@@ -31,11 +31,11 @@ globalThis.addEventListener?.('unhandledrejection', ({ reason }) => {
 });
 
 @observer
-export default class AppShell extends App<I18nProps> {
+export default class CustomApp extends App<I18nProps> {
   static async getInitialProps(context: AppContext) {
     return {
       ...(await App.getInitialProps(context)),
-      ...(await loadSSRLanguage(context.ctx.req!.headers)),
+      ...(await loadSSRLanguage(context.ctx)),
     };
   }
 

pages/_document.tsx

@@ -1,4 +1,3 @@
-import { parseCookie } from 'mobx-i18n';
 import Document, {
   DocumentContext,
   Head,
@@ -7,21 +6,19 @@ import Document, {
   NextScript,
 } from 'next/document';
 
-import type { LanguageCode } from '../models/Translation';
+import { LanguageCode,parseSSRContext } from '../models/Translation';
 
-interface XDocumentProps {
+interface CustomDocumentProps {
   language: LanguageCode;
   colorScheme: 'light' | 'dark';
 }
 
-export default class XDocument extends Document<XDocumentProps> {
+export default class CustomDocument extends Document<CustomDocumentProps> {
   static async getInitialProps(context: DocumentContext) {
-    const props = await Document.getInitialProps(context),
-      { language = 'zh-CN', colorScheme = 'light' } = parseCookie(
-        context.req?.headers.cookie || '',
-      );
-
-    return { ...props, language, colorScheme };
+    return {
+      ...(await Document.getInitialProps(context)),
+      ...parseSSRContext<CustomDocumentProps>(context, ['language']),
+    };
   }
 
   render() {

pages/_error.tsx

@@ -19,7 +19,7 @@ export default class CustomError extends Error<I18nProps> {
 
     return {
       ...(await Error.getInitialProps(context)),
-      ...(await loadSSRLanguage(context.req!.headers)),
+      ...(await loadSSRLanguage(context)),
     };
   }