⬆️ chore: upgrade nextjs to 13.5 (lobehub#219)

* ⬆️ chore: 升级 nextjs 到 13.5

* 🔧 chore: fix theme not work correct after upgrade

* 🐛 fix: fix an url hash error when routing

next.config.mjs

@@ -13,7 +13,9 @@ const withPWA = nextPWA({
 const nextConfig = {
   reactStrictMode: true,
   pageExtensions: ['tsx', 'api.ts'],
-  transpilePackages: ['@lobehub/ui'],
+  // not sure why antd-style cause multi ThemeProvider instance
+  // So we need to transpile it to lib mode
+  transpilePackages: ['@lobehub/ui', 'antd-style'],
   webpack(config) {
     config.experiments = {
       asyncWebAssembly: true,

package.json

@@ -87,7 +87,7 @@
     "lodash-es": "^4",
     "lucide-react": "latest",
     "nanoid": "^5",
-    "next": "13.4.7",
+    "next": "^13.5.3",
     "openai": "^4.10.0",
     "polished": "^4",
     "react": "^18",

src/app/chat/features/Header/Desktop.tsx

@@ -10,6 +10,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useGlobalStore } from '@/store/global';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
+import { pathString } from '@/utils/url';
 
 import PluginTag from './PluginTag';
 import ShareButton from './ShareButton';
@@ -81,7 +82,7 @@ const Header = memo(() => {
             <ActionIcon
               icon={Settings}
               onClick={() => {
-                router.push('/chat/settings', { hash: location.hash });
+                router.push(pathString('/chat/settings', { hash: location.hash }));
               }}
               size={{ fontSize: 24 }}
               title={t('header.session', { ns: 'setting' })}

src/app/chat/features/Header/Mobile.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
+import { pathString } from '@/utils/url';
 
 const MobileHeader = memo(() => {
   const { t } = useTranslation('common');
@@ -25,15 +26,15 @@ const MobileHeader = memo(() => {
   return (
     <MobileNavBar
       center={<MobileNavBarTitle desc={model} title={displayTitle} />}
-      onBackClick={() => router.push('/chat', { hash: null })}
+      onBackClick={() => router.push('/chat')}
       right={
         <>
           <ActionIcon icon={LayoutList} onClick={() => toggleConfig()} />
           {!isInbox && (
             <ActionIcon
               icon={Settings}
               onClick={() => {
-                router.push('/chat/settings', { hash: location.hash });
+                router.push(pathString('/chat/settings', { hash: location.hash }));
               }}
             />
           )}

src/app/chat/settings/features/Header/Desktop.tsx

@@ -3,14 +3,16 @@ import { useRouter } from 'next/navigation';
 import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { pathString } from '@/utils/url';
+
 const Header = memo<{ children: ReactNode }>(({ children }) => {
   const { t } = useTranslation('setting');
   const router = useRouter();
 
   return (
     <ChatHeader
       left={<ChatHeaderTitle title={t('header.session')} />}
-      onBackClick={() => router.push('/chat', { hash: location.hash })}
+      onBackClick={() => router.push(pathString('/chat', { hash: location.hash }))}
       right={children}
       showBackButton
     />

src/app/chat/settings/features/Header/Mobile.tsx

@@ -3,14 +3,16 @@ import { useRouter } from 'next/navigation';
 import { type ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { pathString } from '@/utils/url';
+
 const Header = memo<{ children: ReactNode }>(({ children }) => {
   const { t } = useTranslation('setting');
   const router = useRouter();
 
   return (
     <MobileNavBar
       center={<MobileNavBarTitle title={t('header.session')} />}
-      onBackClick={() => router.push('/chat/mobile', { hash: location.hash })}
+      onBackClick={() => router.push(pathString('/chat/mobile', { hash: location.hash }))}
       right={children}
       showBackButton
     />

src/features/MobileTabBar/index.tsx

@@ -37,7 +37,7 @@ export default memo<{ className?: string }>(({ className }) => {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
         key: 'market',
         onClick: () => {
-          router.push('/market', { hash: '' });
+          router.push('/market');
         },
         title: t('tab.market'),
       },

src/store/session/slices/session/initialState.ts

@@ -1,5 +1,5 @@
 import { merge } from 'lodash-es';
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context';
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 
 import { DEFAULT_AGENT_META, DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { LobeAgentConfig, LobeAgentSession, LobeSessionType } from '@/types/session';

src/utils/url.test.ts

@@ -0,0 +1,51 @@
+import { pathString } from './url';
+
+describe('pathString', () => {
+  it('基本情况', () => {
+    const result = pathString('/home');
+    expect(result).toBe('/home');
+  });
+
+  it('包含查询参数的情况', () => {
+    const result = pathString('/home', { search: 'id=1&name=test' });
+    expect(result).toBe('/home?id=1&name=test');
+  });
+
+  it('包含哈希值的情况', () => {
+    const result = pathString('/home', { hash: 'top' });
+    expect(result).toBe('/home#top');
+
+    const result2 = pathString('/home', { hash: '#hash=abc' });
+    expect(result2).toBe('/home#hash=abc');
+  });
+
+  it('path 参数包含相对路径的情况', () => {
+    const result = pathString('./home');
+    expect(result).toBe('/home');
+  });
+
+  it('path 参数包含绝对路径的情况', () => {
+    const result = pathString('/home');
+    expect(result).toBe('/home');
+  });
+
+  it('path 参数包含协议的情况', () => {
+    const result = pathString('https://www.example.com/home');
+    expect(result).toBe('https://www.example.com/home');
+  });
+
+  it('path 参数包含主机名的情况', () => {
+    const result = pathString('//www.example.com/home');
+    expect(result).toBe('https://www.example.com/home');
+  });
+
+  it('path 参数包含端口号的情况', () => {
+    const result = pathString('//www.example.com:8080/home');
+    expect(result).toBe('https://www.example.com:8080/home');
+  });
+
+  it('path 参数包含特殊字符的情况', () => {
+    const result = pathString('/home/测试');
+    expect(result).toBe('/home/%E6%B5%8B%E8%AF%95');
+  });
+});

src/utils/url.ts

@@ -0,0 +1,23 @@
+/**
+ * Build a path string from a path and a hash/search object
+ * @param path
+ * @param hash
+ * @param search
+ */
+export const pathString = (
+  path: string,
+  {
+    hash = '',
+    search = '',
+  }: {
+    hash?: string;
+    search?: string;
+  } = {},
+) => {
+  const tempBase = 'https://a.com';
+  const url = new URL(path, tempBase);
+
+  if (hash) url.hash = hash;
+  if (search) url.search = search;
+  return url.toString().replace(tempBase, '');
+};