⚡️ perf: make app page as static route to improve performance

src/app/(main)/(mobile)/me/(home)/page.tsx → src/app/[variants]/(main)/(mobile)/me/(home)/page.tsx

@@ -4,7 +4,8 @@ import { Center } from 'react-layout-kit';
 import BrandWatermark from '@/components/BrandWatermark';
 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 Category from './features/Category';
 import UserBanner from './features/UserBanner';
@@ -17,10 +18,10 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
-  const mobile = await isMobileDevice();
+const Page = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
-  if (!mobile) return redirect('/chat');
+  if (!isMobile) return redirect('/chat');
 
   return (
     <>
@@ -36,3 +37,5 @@ const Page = async () => {
 Page.displayName = 'Me';
 
 export default Page;
+
+export const dynamic = 'force-static';

src/app/(main)/(mobile)/me/data/page.tsx → src/app/[variants]/(main)/(mobile)/me/data/page.tsx

@@ -2,7 +2,8 @@ import { redirect } from 'next/navigation';
 
 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 Category from './features/Category';
 
@@ -14,14 +15,16 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
-  const mobile = await isMobileDevice();
+const Page = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
-  if (!mobile) return redirect('/chat');
+  if (!isMobile) return redirect('/chat');
 
   return <Category />;
 };
 
 Page.displayName = 'MeData';
 
 export default Page;
+
+export const dynamic = 'force-static';

src/app/(main)/(mobile)/me/profile/features/Category.tsx → src/app/[variants]/(main)/(mobile)/me/profile/features/Category.tsx

@@ -9,7 +9,7 @@ import Cell, { CellProps } from '@/components/Cell';
 import { isDeprecatedEdition } from '@/const/version';
 import { ProfileTabs } from '@/store/global/initialState';
 import { useUserStore } from '@/store/user';
-import { authSelectors } from '@/store/user/slices/auth/selectors';
+import { authSelectors } from '@/store/user/selectors';
 
 const Category = memo(() => {
   const [isLogin, enableAuth, isLoginWithClerk, signOut] = useUserStore((s) => [

src/app/(main)/(mobile)/me/profile/page.tsx → src/app/[variants]/(main)/(mobile)/me/profile/page.tsx

@@ -2,7 +2,8 @@ import { redirect } from 'next/navigation';
 
 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 Category from './features/Category';
 
@@ -15,14 +16,16 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
-  const mobile = await isMobileDevice();
+const Page = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
-  if (!mobile) return redirect('/profile');
+  if (!isMobile) return redirect('/profile');
 
   return <Category />;
 };
 
 Page.displayName = 'MeProfile';
 
 export default Page;
+
+export const dynamic = 'force-static';

src/app/(main)/(mobile)/me/settings/page.tsx → src/app/[variants]/(main)/(mobile)/me/settings/page.tsx

@@ -2,7 +2,8 @@ import { redirect } from 'next/navigation';
 
 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 Category from './features/Category';
 
@@ -15,14 +16,16 @@ export const generateMetadata = async () => {
   });
 };
 
-const Page = async () => {
-  const mobile = await isMobileDevice();
+const Page = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
-  if (!mobile) return redirect('/settings/common');
+  if (!isMobile) return redirect('/settings/common');
 
   return <Category />;
 };
 
 Page.displayName = 'MeSettings';
 
 export default Page;
+
+export const dynamic = 'force-static';

src/app/(main)/_layout/Desktop/SideBar/index.tsx → src/app/[variants]/(main)/_layout/Desktop/SideBar/index.tsx

@@ -4,6 +4,7 @@ import { SideNav } from '@lobehub/ui';
 import { parseAsBoolean, useQueryState } from 'nuqs';
 import { memo } from 'react';
 
+import { withSuspense } from '@/components/withSuspense';
 import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
@@ -39,4 +40,4 @@ const Nav = memo(() => {
 
 Nav.displayName = 'DesktopNav';
 
-export default Nav;
+export default withSuspense(Nav);

src/app/(main)/_layout/Mobile/NavBar.tsx → src/app/[variants]/(main)/_layout/Mobile/NavBar.tsx

@@ -9,6 +9,7 @@ import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { withSuspense } from '@/components/withSuspense';
 import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 import { SidebarTabKey } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
@@ -75,6 +76,6 @@ const NavBar = memo(() => {
   return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} />;
 });
 
-NavBar.displayName = 'NavBar';
+NavBar.displayName = 'MobileNav';
 
-export default NavBar;
+export default withSuspense(NavBar);

src/app/(main)/changelog/layout.tsx → src/app/[variants]/(main)/changelog/layout.tsx

@@ -8,3 +8,5 @@ const MainLayout = ServerLayout({ Desktop, Mobile });
 MainLayout.displayName = 'ChangelogLayout';
 
 export default MainLayout;
+
+export const dynamic = 'force-static';

src/app/(main)/changelog/modal/page.tsx → src/app/[variants]/(main)/changelog/modal/page.tsx

@@ -1,17 +1,16 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
 import { useLayoutEffect } from 'react';
 
-import { useQueryRoute } from '@/hooks/useQueryRoute';
-
 /**
  * @description: Changelog Modal (intercepting routes fallback when hard refresh)
  * @example: /changelog/modal => /changelog
  * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
  */
 
 const ChangelogModalFallback = () => {
-  const router = useQueryRoute();
+  const router = useRouter();
 
   useLayoutEffect(() => {
     router.replace('/changelog');

src/app/(main)/changelog/page.tsx → src/app/[variants]/(main)/changelog/page.tsx

@@ -4,7 +4,7 @@ import { Fragment, Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import Pagination from '@/app/@modal/(.)changelog/modal/features/Pagination';
+import Pagination from '@/app/[variants]/@modal/(.)changelog/modal/features/Pagination';
 import StructuredData from '@/components/StructuredData';
 import { serverFeatureFlags } from '@/config/featureFlags';
 import { BRANDING_NAME } from '@/const/branding';

src/app/(main)/chat/(workspace)/@conversation/default.tsx → src/app/[variants]/(main)/chat/(workspace)/@conversation/default.tsx

@@ -1,19 +1,20 @@
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import ChatHydration from './features/ChatHydration';
 import ChatInput from './features/ChatInput';
 import ChatList from './features/ChatList';
 import ThreadHydration from './features/ThreadHydration';
 import ZenModeToast from './features/ZenModeToast';
 
-const ChatConversation = async () => {
-  const mobile = await isMobileDevice();
+const ChatConversation = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
   return (
     <>
       <ZenModeToast />
-      <ChatList mobile={mobile} />
-      <ChatInput mobile={mobile} />
+      <ChatList mobile={isMobile} />
+      <ChatInput mobile={isMobile} />
       <ChatHydration />
       <ThreadHydration />
     </>

src/app/(main)/chat/(workspace)/@portal/default.tsx → src/app/[variants]/(main)/chat/(workspace)/@portal/default.tsx

@@ -1,17 +1,18 @@
 import React, { Suspense, lazy } from 'react';
 
 import Loading from '@/components/Loading/BrandTextLoading';
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
 
 const PortalBody = lazy(() => import('@/features/Portal/router'));
 
-const Inspector = async () => {
-  const mobile = await isMobileDevice();
+const Inspector = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
-  const Layout = mobile ? Mobile : Desktop;
+  const Layout = isMobile ? Mobile : Desktop;
 
   return (
     <Suspense fallback={<Loading />}>

src/app/(main)/chat/(workspace)/@topic/default.tsx → src/app/[variants]/(main)/chat/(workspace)/@topic/default.tsx

@@ -1,7 +1,8 @@
 // import TopicListContent from './features/TopicListContent';
 import React, { Suspense, lazy } from 'react';
 
-import { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
@@ -10,14 +11,14 @@ import SystemRole from './features/SystemRole';
 
 const TopicContent = lazy(() => import('./features/TopicListContent'));
 
-const Topic = async () => {
-  const mobile = await isMobileDevice();
+const Topic = async (props: DynamicLayoutProps) => {
+  const isMobile = await RouteVariants.getIsMobile(props);
 
-  const Layout = mobile ? Mobile : Desktop;
+  const Layout = isMobile ? Mobile : Desktop;
 
   return (
     <>
-      {!mobile && <SystemRole />}
+      {!isMobile && <SystemRole />}
       <Layout>
         <Suspense fallback={<SkeletonList />}>
           <TopicContent />

src/app/(main)/chat/(workspace)/_layout/Mobile/ChatHeader/index.tsx → src/app/[variants]/(main)/chat/(workspace)/_layout/Mobile/ChatHeader/index.tsx

@@ -3,7 +3,7 @@
 import { MobileNavBar } from '@lobehub/ui/mobile';
 import { memo, useState } from 'react';
 
-import { useInitAgentConfig } from '@/app/(main)/chat/(workspace)/_layout/useInitAgentConfig';
+import { useInitAgentConfig } from '@/app/[variants]/(main)/chat/(workspace)/_layout/useInitAgentConfig';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';

src/app/[variants]/(main)/chat/(workspace)/page.tsx

@@ -0,0 +1,56 @@
+// import { Suspense } from 'react';
+import StructuredData from '@/components/StructuredData';
+// import { serverFeatureFlags } from '@/config/featureFlags';
+import { BRANDING_NAME } from '@/const/branding';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
+
+import PageTitle from '../features/PageTitle';
+// import Changelog from './features/ChangelogModal';
+import TelemetryNotification from './features/TelemetryNotification';
+
+export const generateMetadata = async (props: DynamicLayoutProps) => {
+  const locale = await RouteVariants.getLocale(props);
+
+  const { t } = await translation('metadata', locale);
+  return metadataModule.generate({
+    description: t('chat.description', { appName: BRANDING_NAME }),
+    title: t('chat.title', { appName: BRANDING_NAME }),
+    url: '/chat',
+  });
+};
+
+const Page = async (props: DynamicLayoutProps) => {
+  // const { hideDocs, showChangelog } = serverFeatureFlags();
+
+  const { isMobile, locale } = await RouteVariants.getVariantsFromProps(props);
+  const { t } = await translation('metadata', locale);
+
+  const ld = ldModule.generate({
+    description: t('chat.description', { appName: BRANDING_NAME }),
+    title: t('chat.title', { appName: BRANDING_NAME }),
+    url: '/chat',
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <PageTitle />
+      <TelemetryNotification mobile={isMobile} />
+      {/*{showChangelog && !hideDocs && !isMobile && (*/}
+      {/*  <Suspense>*/}
+      {/*    <Changelog />*/}
+      {/*  </Suspense>*/}
+      {/*)}*/}
+    </>
+  );
+};
+
+Page.displayName = 'Chat';
+
+export default Page;
+
+export const dynamic = 'force-static';