clean

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/[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';
@@ -81,4 +82,4 @@ NavBar.displayName = 'NavBar';
 NavBar.displayName = 'MobileNav';
 >>>>>>>> f203f9016 (refactor nav into core layout):src/app/[variants]/(main)/_layout/Mobile/NavBar.tsx
 
-export default NavBar;
+export default withSuspense(NavBar);

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/[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/[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/[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/[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/[variants]/(main)/chat/(workspace)/page.tsx

@@ -1,30 +1,34 @@
-import { Suspense } from 'react';
-
+// import { Suspense } from 'react';
 import StructuredData from '@/components/StructuredData';
-import { serverFeatureFlags } from '@/config/featureFlags';
+// 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 { isMobileDevice } from '@/utils/server/responsive';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
 import PageTitle from '../features/PageTitle';
-import Changelog from './features/ChangelogModal';
+// import Changelog from './features/ChangelogModal';
 import TelemetryNotification from './features/TelemetryNotification';
 
-export const generateMetadata = async () => {
-  const { t } = await translation('metadata');
+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 () => {
-  const { hideDocs, showChangelog } = serverFeatureFlags();
-  const mobile = await isMobileDevice();
-  const { t } = await translation('metadata');
+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 }),
@@ -35,16 +39,18 @@ const Page = async () => {
     <>
       <StructuredData ld={ld} />
       <PageTitle />
-      <TelemetryNotification mobile={mobile} />
-      {showChangelog && !hideDocs && !mobile && (
-        <Suspense>
-          <Changelog />
-        </Suspense>
-      )}
+      <TelemetryNotification mobile={isMobile} />
+      {/*{showChangelog && !hideDocs && !isMobile && (*/}
+      {/*  <Suspense>*/}
+      {/*    <Changelog />*/}
+      {/*  </Suspense>*/}
+      {/*)}*/}
     </>
   );
 };
 
 Page.displayName = 'Chat';
 
 export default Page;
+
+export const dynamic = 'force-static';

src/app/[variants]/(main)/discover/(list)/_layout/Desktop/Nav.tsx

@@ -9,6 +9,7 @@ import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
+import { withSuspense } from '@/components/withSuspense';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { DiscoverTab } from '@/types/discover';
 
@@ -115,4 +116,4 @@ const Nav = memo(() => {
   );
 });
 
-export default Nav;
+export default withSuspense(Nav);

src/app/[variants]/(main)/discover/(list)/_layout/Mobile/Nav.tsx

@@ -9,6 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
 import Menu from '@/components/Menu';
+import { withSuspense } from '@/components/withSuspense';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { DiscoverTab } from '@/types/discover';
 
@@ -91,4 +92,4 @@ const Nav = memo(() => {
   );
 });
 
-export default Nav;
+export default withSuspense(Nav);

src/app/[variants]/(main)/discover/(list)/layout.tsx

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

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

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

src/app/[variants]/(main)/discover/search/_layout/Mobile/index.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, Suspense } from 'react';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 import Footer from '@/features/Setting/Footer';
@@ -12,10 +12,10 @@ const Layout = ({ children }: PropsWithChildren) => {
     <MobileContentLayout
       gap={16}
       header={
-        <>
+        <Suspense>
           <Header />
           <Nav />
-        </>
+        </Suspense>
       }
       id={SCROLL_PARENT_ID}
       style={{ paddingInline: 16 }}

src/app/[variants]/(main)/discover/search/features/Category.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 import qs from 'query-string';
 import { memo } from 'react';
 
+import { withSuspense } from '@/components/withSuspense';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { DiscoverTab } from '@/types/discover';
 
@@ -38,4 +39,4 @@ const Category = memo(() => {
   );
 });
 
-export default Category;
+export default withSuspense(Category);

src/app/[variants]/(main)/discover/search/page.tsx

@@ -71,3 +71,5 @@ const Page = async (props: Props) => {
 Page.DisplayName = 'DiscoverSearch';
 
 export default Page;
+
+export const dynamic = 'force-static';

src/app/[variants]/(main)/profile/_layout/Desktop/Header.tsx

@@ -5,9 +5,12 @@ import { Drawer, type DrawerProps } from 'antd';
 import { createStyles } from 'antd-style';
 import { Menu } from 'lucide-react';
 import { ReactNode, memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
+import { withSuspense } from '@/components/withSuspense';
+import { useActiveProfileKey } from '@/hooks/useActiveTabKey';
 
 const useStyles = createStyles(({ token, css }) => ({
   container: css`
@@ -25,12 +28,14 @@ const useStyles = createStyles(({ token, css }) => ({
 
 interface HeaderProps extends Pick<DrawerProps, 'getContainer'> {
   children: ReactNode;
-  title: ReactNode;
 }
 
-const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
+const Header = memo<HeaderProps>(({ children, getContainer }) => {
   const [open, setOpen] = useState(false);
   const { styles, theme } = useStyles();
+  const { t } = useTranslation('auth');
+  const activeKey = useActiveProfileKey();
+  const title = t(`tab.${activeKey}`);
 
   return (
     <>
@@ -82,4 +87,4 @@ const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
   );
 });
 
-export default Header;
+export default withSuspense(Header);

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

@@ -2,13 +2,11 @@
 
 import { useResponsive } from 'antd-style';
 import { memo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 import SettingContainer from '@/features/Setting/SettingContainer';
-import { useActiveProfileKey } from '@/hooks/useActiveTabKey';
 
 import { LayoutProps } from '../type';
 import Header from './Header';
@@ -17,8 +15,6 @@ import SideBar from './SideBar';
 const Layout = memo<LayoutProps>(({ children, category }) => {
   const ref = useRef<any>(null);
   const { md = true } = useResponsive();
-  const { t } = useTranslation('auth');
-  const activeKey = useActiveProfileKey();
 
   return (
     <>
@@ -32,9 +28,7 @@ const Layout = memo<LayoutProps>(({ children, category }) => {
         {md ? (
           <SideBar>{category}</SideBar>
         ) : (
-          <Header getContainer={() => ref.current} title={<>{t(`tab.${activeKey}`)}</>}>
-            {category}
-          </Header>
+          <Header getContainer={() => ref.current}>{category}</Header>
         )}
         <SettingContainer addonAfter={<Footer />}>{children}</SettingContainer>
       </Flexbox>

src/app/[variants]/(main)/profile/_layout/Mobile/Header.tsx

@@ -6,6 +6,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { withSuspense } from '@/components/withSuspense';
 import { useActiveProfileKey } from '@/hooks/useActiveTabKey';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
@@ -41,4 +42,4 @@ const Header = memo(() => {
   );
 });
 
-export default Header;
+export default withSuspense(Header);

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

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

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

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