@lobehub/chat 1.51.3 → 1.51.5

package/src/app/{(main) → [variants]/(main)}/discover/(list)/assistants/[slug]/page.tsx

@@ -6,7 +6,7 @@ import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
 import { AssistantCategory, DiscoverPageProps } from '@/types/discover';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import List from '../features/List';
 
@@ -32,7 +32,7 @@ const Page = async (props: DiscoverPageProps<AssistantCategory>) => {
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
-  const mobile = await isMobileDevice();
+  const mobile = await RouteVariants.getIsMobile(props);
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getAssistantCategory(locale, params.slug);

package/src/app/{(main) → [variants]/(main)}/discover/(list)/assistants/page.tsx

@@ -4,11 +4,15 @@ import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { parsePageLocale } from '@/utils/locale';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import List from './features/List';
 
-type Props = { searchParams: Promise<{ hl?: Locales }> };
+interface Props extends DynamicLayoutProps {
+  searchParams: Promise<{ hl?: Locales }>;
+}
 
 export const generateMetadata = async (props: Props) => {
   const searchParams = await props.searchParams;
@@ -24,8 +28,10 @@ export const generateMetadata = async (props: Props) => {
 
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
-  const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = await isMobileDevice();
+  const { t } = await translation('metadata', searchParams?.hl);
+  const mobile = await RouteVariants.getIsMobile(props);
+
+  const locale = await parsePageLocale(props);
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getAssistantList(locale);

package/src/app/{(main) → [variants]/(main)}/discover/(list)/models/[slug]/page.tsx

@@ -7,7 +7,7 @@ import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
 import { DiscoverPageProps } from '@/types/discover';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import List from '../features/List';
 
@@ -35,7 +35,7 @@ const Page = async (props: DiscoverPageProps) => {
   const searchParams = await props.searchParams;
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = await isMobileDevice();
+  const mobile = await RouteVariants.getIsMobile(props);
 
   const discoverService = new DiscoverService();
   const list = await discoverService.getProviderList(locale);

package/src/app/{(main) → [variants]/(main)}/discover/(list)/models/page.tsx

@@ -5,16 +5,21 @@ import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { parsePageLocale } from '@/utils/locale';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import List from './features/List';
 
-type Props = { searchParams: Promise<{ hl?: Locales }> };
+interface Props extends DynamicLayoutProps {
+  searchParams: Promise<{ hl?: Locales }>;
+}
 
 export const generateMetadata = async (props: Props) => {
   const searchParams = await props.searchParams;
 
-  const { t, locale } = await translation('metadata', searchParams.hl);
+  const { t } = await translation('metadata', searchParams.hl);
+  const locale = await parsePageLocale(props);
 
   return metadataModule.generate({
     alternate: true,
@@ -28,8 +33,9 @@ export const generateMetadata = async (props: Props) => {
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
 
-  const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = await isMobileDevice();
+  const { t } = await translation('metadata', searchParams?.hl);
+  const mobile = await RouteVariants.getIsMobile(props);
+  const locale = await parsePageLocale(props);
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getModelList(locale);

package/src/app/{(main) → [variants]/(main)}/discover/(list)/plugins/[slug]/page.tsx

@@ -6,7 +6,7 @@ import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
 import { DiscoverPageProps, PluginCategory } from '@/types/discover';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import List from '../features/List';
 
@@ -32,7 +32,7 @@ const Page = async (props: DiscoverPageProps<PluginCategory>) => {
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
   const { t: td } = await translation('discover', searchParams?.hl);
-  const mobile = await isMobileDevice();
+  const mobile = await RouteVariants.getIsMobile(props);
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getPluginCategory(locale, params.slug);

package/src/app/{(main) → [variants]/(main)}/discover/(list)/plugins/page.tsx

@@ -4,15 +4,20 @@ import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { parsePageLocale } from '@/utils/locale';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import List from './features/List';
 
-type Props = { searchParams: Promise<{ hl?: Locales }> };
+interface Props extends DynamicLayoutProps {
+  searchParams: Promise<{ hl?: Locales }>;
+}
 
 export const generateMetadata = async (props: Props) => {
   const searchParams = await props.searchParams;
-  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const { t } = await translation('metadata', searchParams?.hl);
+  const locale = await parsePageLocale(props);
 
   return metadataModule.generate({
     alternate: true,
@@ -25,8 +30,9 @@ export const generateMetadata = async (props: Props) => {
 
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
-  const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = await isMobileDevice();
+  const { t } = await translation('metadata', searchParams?.hl);
+  const mobile = await RouteVariants.getIsMobile(props);
+  const locale = await parsePageLocale(props);
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getPluginList(locale);

package/src/app/{(main) → [variants]/(main)}/discover/(list)/providers/page.tsx

@@ -4,15 +4,20 @@ import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { DiscoverService } from '@/server/services/discover';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { parsePageLocale } from '@/utils/locale';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import List from './features/List';
 
-type Props = { searchParams: Promise<{ hl?: Locales }> };
+interface Props extends DynamicLayoutProps {
+  searchParams: Promise<{ hl?: Locales }>;
+}
 
 export const generateMetadata = async (props: Props) => {
   const searchParams = await props.searchParams;
-  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const { t } = await translation('metadata', searchParams?.hl);
+  const locale = await parsePageLocale(props);
 
   return metadataModule.generate({
     alternate: true,
@@ -25,8 +30,9 @@ export const generateMetadata = async (props: Props) => {
 
 const Page = async (props: Props) => {
   const searchParams = await props.searchParams;
-  const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = await isMobileDevice();
+  const { t } = await translation('metadata', searchParams?.hl);
+  const mobile = await RouteVariants.getIsMobile(props);
+  const locale = await parsePageLocale(props);
 
   const discoverService = new DiscoverService();
   const items = await discoverService.getProviderList(locale);

package/src/app/{(main) → [variants]/(main)}/discover/layout.tsx

@@ -10,3 +10,5 @@ const MainLayout = ServerLayout<PropsWithChildren>({ Desktop, Mobile });
 MainLayout.displayName = 'DiscoverStoreLayout';
 
 export default MainLayout;
+
+export const dynamic = 'force-static';

package/src/app/{(main) → [variants]/(main)}/discover/search/page.tsx

@@ -7,7 +7,7 @@ import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 import { PageProps } from '@/types/next';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import AssistantsResult from './features/AssistantsResult';
 import ModelsResult from './features/ModelsResult';
@@ -15,7 +15,7 @@ import PluginsResult from './features/PluginsResult';
 import ProvidersResult from './features/ProvidersResult';
 
 type Props = PageProps<
-  undefined,
+  { variants: string },
   {
     hl?: Locales;
     q?: string;
@@ -45,7 +45,7 @@ const Page = async (props: Props) => {
   const keywords = decodeURIComponent(q);
 
   const { t, locale } = await translation('metadata', searchParams?.hl);
-  const mobile = await isMobileDevice();
+  const mobile = await RouteVariants.getIsMobile(props);
 
   const ld = ldModule.generate({
     description: t('discover.description'),

package/src/app/{(main) → [variants]/(main)}/files/(content)/@menu/features/FileMenu/index.tsx

@@ -7,7 +7,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useFileCategory } from '@/app/(main)/files/hooks/useFileCategory';
+import { useFileCategory } from '@/app/[variants]/(main)/files/hooks/useFileCategory';
 import Menu from '@/components/Menu';
 import type { MenuProps } from '@/components/Menu';
 import { FilesTabs } from '@/types/files';

package/src/app/{(main) → [variants]/(main)}/files/(content)/@modal/(.)[id]/FullscreenModal.tsx

@@ -6,7 +6,7 @@ import { createStyles } from 'antd-style';
 import { useRouter } from 'next/navigation';
 import { ReactNode, useState } from 'react';
 
-import { DETAIL_PANEL_WIDTH } from '@/app/(main)/files/features/FileDetail';
+import { DETAIL_PANEL_WIDTH } from '@/app/[variants]/(main)/files/features/FileDetail';
 
 const useStyles = createStyles(({ css, token }, showDetail: boolean) => {
   return {

package/src/app/{(main) → [variants]/(main)}/files/(content)/page.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslation } from 'react-i18next';
 
-import { useFileCategory } from '@/app/(main)/files/hooks/useFileCategory';
+import { useFileCategory } from '@/app/[variants]/(main)/files/hooks/useFileCategory';
 import FileManager from '@/features/FileManager';
 import { FilesTabs } from '@/types/files';
 

package/src/app/{(main) → [variants]/(main)}/files/hooks/useFileCategory.ts

@@ -3,7 +3,4 @@ import { useQueryState } from 'nuqs';
 import { FilesTabs } from '@/types/files';
 
 export const useFileCategory = () =>
-  useQueryState('category', {
-    clearOnDefault: true,
-    defaultValue: FilesTabs.All,
-  });
+  useQueryState('category', { clearOnDefault: true, defaultValue: FilesTabs.All });

package/src/app/{(main) → [variants]/(main)}/files/layout.tsx

@@ -10,3 +10,5 @@ export default ({ children }: PropsWithChildren) => {
 
   return children;
 };
+
+export const dynamic = 'force-static';

package/src/app/{(main) → [variants]/(main)}/profile/(home)/[[...slugs]]/page.tsx

@@ -4,7 +4,8 @@ import dynamic from 'next/dynamic';
 import { enableClerk } from '@/const/auth';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import Client from '../Client';
 
@@ -27,8 +28,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
-  const mobile = await isMobileDevice();
+const Page = async (props: DynamicLayoutProps) => {
+  const mobile = await RouteVariants.getIsMobile(props);
 
   if (enableClerk) return <ClerkProfile mobile={mobile} />;
 

package/src/app/{(main) → [variants]/(main)}/profile/features/ClerkProfile.tsx

@@ -5,6 +5,8 @@ import { ElementsConfig } from '@clerk/types';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
+import { withSuspense } from '@/components/withSuspense';
+
 export const useStyles = createStyles(
   ({ css, responsive, token }) =>
     ({
@@ -69,4 +71,4 @@ const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
   );
 });
 
-export default Client;
+export default withSuspense(Client);

package/src/app/{(main) → [variants]/(main)}/profile/security/page.tsx

@@ -3,7 +3,8 @@ import { notFound } from 'next/navigation';
 import { enableClerk } from '@/const/auth';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import ClerkProfile from '../features/ClerkProfile';
 
@@ -16,9 +17,9 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
+const Page = async (props: DynamicLayoutProps) => {
   if (!enableClerk) return notFound();
-  const mobile = await isMobileDevice();
+  const mobile = await RouteVariants.getIsMobile(props);
 
   return <ClerkProfile mobile={mobile} />;
 };

package/src/app/{(main) → [variants]/(main)}/profile/stats/page.tsx

@@ -1,6 +1,7 @@
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import Client from './Client';
 
@@ -13,8 +14,8 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
-  const mobile = await isMobileDevice();
+const Page = async (props: DynamicLayoutProps) => {
+  const mobile = await RouteVariants.getIsMobile(props);
   return <Client mobile={mobile} />;
 };
 

package/src/app/{(main) → [variants]/(main)}/settings/@category/features/CategoryContent.tsx

@@ -4,6 +4,7 @@ import { memo } from 'react';
 import urlJoin from 'url-join';
 
 import Menu from '@/components/Menu';
+import { withSuspense } from '@/components/withSuspense';
 import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 
@@ -27,4 +28,4 @@ const CategoryContent = memo(() => {
   );
 });
 
-export default CategoryContent;
+export default withSuspense(CategoryContent);

package/src/app/{(main) → [variants]/(main)}/settings/common/features/Common.tsx

@@ -6,7 +6,7 @@ import isEqual from 'fast-deep-equal';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
+import { useSyncSettings } from '@/app/[variants]/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import { useChatStore } from '@/store/chat';

package/src/app/{(main) → [variants]/(main)}/settings/common/features/Theme/index.tsx

@@ -8,7 +8,7 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
+import { useSyncSettings } from '@/app/[variants]/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { imageUrl } from '@/const/url';
 import { Locales, localeOptions } from '@/locales/resources';

package/src/app/{(main) → [variants]/(main)}/settings/layout.ts

@@ -9,3 +9,5 @@ const SettingsLayout = ServerLayout<LayoutProps>({ Desktop, Mobile });
 SettingsLayout.displayName = 'SettingsLayout';
 
 export default SettingsLayout;
+
+export const dynamic = 'force-static';

package/src/app/{(main) → [variants]/(main)}/settings/llm/components/ProviderConfig/index.tsx

@@ -12,14 +12,14 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
+import { useSyncSettings } from '@/app/[variants]/(main)/settings/hooks/useSyncSettings';
 import {
   KeyVaultsConfigKey,
   LLMProviderApiTokenKey,
   LLMProviderBaseUrlKey,
   LLMProviderConfigKey,
   LLMProviderModelListKey,
-} from '@/app/(main)/settings/llm/const';
+} from '@/app/[variants]/(main)/settings/llm/const';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { AES_GCM_URL, BASE_PROVIDER_DOC_URL } from '@/const/url';
 import { isServerMode } from '@/const/version';

package/src/app/{(main) → [variants]/(main)}/settings/provider/layout.tsx

@@ -9,11 +9,11 @@ import Mobile from './_layout/Mobile';
 
 const Layout = ServerLayout({ Desktop, Mobile });
 
-const ProviderSettingsLayout = ({ children }: PropsWithChildren) => {
+const ProviderSettingsLayout = ({ children, ...res }: PropsWithChildren) => {
   const showLLM = serverFeatureFlags().showProvider;
   if (!showLLM) return notFound();
 
-  return <Layout>{children}</Layout>;
+  return <Layout {...res}>{children}</Layout>;
 };
 
 ProviderSettingsLayout.displayName = 'ProviderSettingsLayout';

package/src/app/{(main) → [variants]/(main)}/settings/sync/features/WebRTC/index.tsx

@@ -7,7 +7,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
+import { useSyncSettings } from '@/app/[variants]/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import SyncStatusInspector from '@/features/SyncStatusInspector';
 import { useUserStore } from '@/store/user';

package/src/app/{@modal → [variants]/@modal}/(.)changelog/modal/page.tsx

@@ -3,20 +3,19 @@ import { Suspense } from 'react';
 
 import { serverFeatureFlags } from '@/config/featureFlags';
 import { ChangelogService } from '@/server/services/changelog';
-import { getLocale } from '@/server/translation';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import Post from './features/Post';
 import UpdateChangelogStatus from './features/UpdateChangelogStatus';
 import Loading from './loading';
 
-const Page = async () => {
+const Page = async (props: DynamicLayoutProps) => {
   const hideDocs = serverFeatureFlags().hideDocs;
 
   if (hideDocs) return notFound();
+  const { locale, isMobile } = await RouteVariants.getVariantsFromProps(props);
 
-  const locale = await getLocale();
-  const mobile = await isMobileDevice();
   const changelogService = new ChangelogService();
   const data = await changelogService.getChangelogIndex();
 
@@ -26,7 +25,7 @@ const Page = async () => {
     <>
       {data?.map((item) => (
         <Suspense fallback={<Loading />} key={item.id}>
-          <Post locale={locale} mobile={mobile} {...item} />
+          <Post locale={locale as any} mobile={isMobile} {...item} />
         </Suspense>
       ))}
       <UpdateChangelogStatus currentId={data[0]?.id} />

package/src/app/{@modal → [variants]/@modal}/_layout/SettingModalLayout.tsx

@@ -4,8 +4,8 @@ import { useResponsive, useTheme } from 'antd-style';
 import { ReactNode, memo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import Header from '@/app/(main)/settings/_layout/Desktop/Header';
-import SideBar from '@/app/(main)/settings/_layout/Desktop/SideBar';
+import Header from '@/app/[variants]/(main)/settings/_layout/Desktop/Header';
+import SideBar from '@/app/[variants]/(main)/settings/_layout/Desktop/SideBar';
 import Footer from '@/features/Setting/Footer';
 
 interface SettingLayoutProps {

package/src/app/{@modal → [variants]/@modal}/chat/(.)settings/modal/features/CategoryContent.tsx

@@ -3,7 +3,7 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderContent from '@/app/(main)/chat/settings/features/HeaderContent';
+import HeaderContent from '@/app/[variants]/(main)/chat/settings/features/HeaderContent';
 import Menu from '@/components/Menu';
 import { useChatSettingsTab } from '@/hooks/useChatSettingsTab';
 import { useQueryRoute } from '@/hooks/useQueryRoute';

package/src/app/{@modal → [variants]/@modal}/chat/(.)settings/modal/layout.tsx

@@ -6,7 +6,7 @@ import dynamic from 'next/dynamic';
 import { PropsWithChildren, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import ModalLayout from '@/app/@modal/_layout/ModalLayout';
+import ModalLayout from '@/app/[variants]/@modal/_layout/ModalLayout';
 import StoreUpdater from '@/features/AgentSetting/StoreUpdater';
 import { Provider, createStore } from '@/features/AgentSetting/store';
 import { useChatSettingsTab } from '@/hooks/useChatSettingsTab';

package/src/app/[variants]/layout.tsx

@@ -0,0 +1,94 @@
+import { SpeedInsights } from '@vercel/speed-insights/next';
+import { ThemeAppearance } from 'antd-style';
+import { ResolvingViewport } from 'next';
+import { ReactNode } from 'react';
+import { isRtlLang } from 'rtl-detect';
+
+import Analytics from '@/components/Analytics';
+import { DEFAULT_LANG } from '@/const/locale';
+import PWAInstall from '@/features/PWAInstall';
+import AuthProvider from '@/layout/AuthProvider';
+import GlobalProvider from '@/layout/GlobalProvider';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
+
+const inVercel = process.env.VERCEL === '1';
+
+interface RootLayoutProps extends DynamicLayoutProps {
+  children: ReactNode;
+  modal: ReactNode;
+}
+
+const RootLayout = async ({ children, params, modal }: RootLayoutProps) => {
+  const { variants } = await params;
+
+  const { locale, isMobile, theme, primaryColor, neutralColor } =
+    RouteVariants.deserializeVariants(variants);
+
+  const direction = isRtlLang(locale) ? 'rtl' : 'ltr';
+
+  return (
+    <html dir={direction} lang={locale} suppressHydrationWarning>
+      <body>
+        <GlobalProvider
+          appearance={theme}
+          isMobile={isMobile}
+          locale={locale}
+          neutralColor={neutralColor}
+          primaryColor={primaryColor}
+        >
+          <AuthProvider>
+            {children}
+            {!isMobile && modal}
+          </AuthProvider>
+          <PWAInstall />
+        </GlobalProvider>
+        <Analytics />
+        {inVercel && <SpeedInsights />}
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;
+
+export { generateMetadata } from './metadata';
+
+export const generateViewport = async (props: DynamicLayoutProps): ResolvingViewport => {
+  const isMobile = await RouteVariants.getIsMobile(props);
+
+  const dynamicScale = isMobile ? { maximumScale: 1, userScalable: false } : {};
+
+  return {
+    ...dynamicScale,
+    initialScale: 1,
+    minimumScale: 1,
+    themeColor: [
+      { color: '#f8f8f8', media: '(prefers-color-scheme: light)' },
+      { color: '#000', media: '(prefers-color-scheme: dark)' },
+    ],
+    viewportFit: 'cover',
+    width: 'device-width',
+  };
+};
+
+export const generateStaticParams = () => {
+  const themes: ThemeAppearance[] = ['dark', 'light'];
+  const mobileOptions = [true, false];
+  // only static for serveral page, other go to dynamtic
+  const staticLocales = [DEFAULT_LANG, 'zh-CN'];
+
+  const variants: { variants: string }[] = [];
+
+  for (const locale of staticLocales) {
+    for (const theme of themes) {
+      for (const isMobile of mobileOptions) {
+        variants.push({
+          variants: RouteVariants.serializeVariants({ isMobile, locale, theme }),
+        });
+      }
+    }
+  }
+
+  return variants;
+};

package/src/app/{page.tsx → [variants]/page.tsx}

@@ -6,4 +6,6 @@ export const metadata: Metadata = {
   alternates: { canonical: getCanonicalUrl('/') },
 };
 
-export { default } from '@/app/loading';
+export { default } from './loading';
+
+export const dynamic = 'force-static';