@lobehub/lobehub 2.0.0-next.293 → 2.0.0-next.295

package/src/app/[variants]/(main)/hooks/useActiveTabKey.ts

@@ -1,21 +1,18 @@
-import { useLocation, useSearchParams } from 'react-router-dom';
-
 import { ProfileTabs, SettingsTabs, type SidebarTabKey } from '@/store/global/initialState';
+import { usePathname, useSearchParams } from '@/libs/router/navigation';
 
 /**
  * Returns the active tab key (chat/discover/settings/...)
- * React Router version for (main) directory
+ * Uses React Router via @/libs/router
  */
 export const useActiveTabKey = () => {
-  const location = useLocation();
-  const pathname = location.pathname;
-
+  const pathname = usePathname();
   return pathname.split('/').find(Boolean) as SidebarTabKey;
 };
 
 /**
  * Returns the active setting page key (?active=common/sync/agent/...)
- * React Router version for (main) directory
+ * Uses React Router via @/libs/router
  */
 export const useActiveSettingsKey = () => {
   const [searchParams] = useSearchParams();
@@ -26,12 +23,10 @@ export const useActiveSettingsKey = () => {
 
 /**
  * Returns the active profile page key (profile/security/stats/...)
- * React Router version for (main) directory
+ * Uses React Router via @/libs/router
  */
 export const useActiveProfileKey = () => {
-  const location = useLocation();
-  const pathname = location.pathname;
-
+  const pathname = usePathname();
   const tabs = pathname.split('/').findLast(Boolean);
 
   if (tabs === 'profile') return ProfileTabs.Profile;

package/src/app/[variants]/(main)/image/NotSupportClient.tsx

@@ -4,7 +4,6 @@ import { UTM_SOURCE } from '@lobechat/business-const';
 import { Center, Flexbox, Icon, Text } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { Database, FileImage, Network, Sparkles } from 'lucide-react';
-import Link from 'next/link';
 import { Trans, useTranslation } from 'react-i18next';
 
 import FeatureList from '@/components/FeatureList';
@@ -131,11 +130,13 @@ const NotSupportClient = () => {
           <Trans
             components={[
               <span key="0" />,
-              <Link href={DATABASE_SELF_HOSTING_URL} key="1" />,
+              <a href={DATABASE_SELF_HOSTING_URL} key="1" rel="noreferrer" target="_blank" />,
               <span key="2" />,
-              <Link
+              <a
                 href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}&utm_medium=client_not_support_image`}
                 key="3"
+                rel="noreferrer"
+                target="_blank"
               />,
             ]}
             i18nKey={'notSupportGuide.desc'}

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/ImageUpload.tsx

@@ -4,7 +4,7 @@ import { Center } from '@lobehub/ui';
 import { App } from 'antd';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { Image as ImageIcon, X } from 'lucide-react';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import React, { type FC, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/MultiImagesUpload/ImageManageModal.tsx

@@ -3,7 +3,7 @@
 import { Button, Modal } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { Upload, X } from 'lucide-react';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import React, { type FC, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/MultiImagesUpload/index.tsx

@@ -4,7 +4,7 @@
 import { Center } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { Image as ImageIcon, X } from 'lucide-react';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import React, { type FC, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/memory/(home)/features/RoleTagCloud/index.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Block } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { MaximizeIcon, MinimizeIcon } from 'lucide-react';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useEffect, useState } from 'react';
 
 import Loading from '@/components/Loading/BrandTextLoading';

package/src/app/[variants]/(main)/memory/_layout/Sidebar/Header/Nav.tsx

@@ -9,7 +9,7 @@ import {
   SearchIcon,
   SignatureIcon,
 } from 'lucide-react';
-import { usePathname } from 'next/navigation';
+import { usePathname } from '@/libs/router/navigation';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';

package/src/app/[variants]/(main)/memory/features/SourceLink.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, Text } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { Link2 } from 'lucide-react';
-import Link from 'next/link';
+import Link from '@/libs/router/Link';
 import { memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 

package/src/app/[variants]/(main)/page/_layout/Body/AllPagesDrawer/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Flexbox, SearchBar } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/settings/about/features/ItemCard.tsx

@@ -1,7 +1,6 @@
 import { Block, Icon } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { type LucideIcon } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 
 export interface ItemCardProps {
@@ -13,12 +12,12 @@ export interface ItemCardProps {
 
 const ItemCard = memo<ItemCardProps>(({ label, icon, href }) => {
   return (
-    <Link href={href} style={{ color: 'inherit' }} target={'_blank'}>
+    <a href={href} rel="noreferrer" style={{ color: 'inherit' }} target="_blank">
       <Block clickable gap={12} horizontal paddingBlock={12} paddingInline={18}>
         {icon && <Icon fill={cssVar.colorText} icon={icon} size={18} />}
         {label}
       </Block>
-    </Link>
+    </a>
   );
 });
 

package/src/app/[variants]/(main)/settings/about/features/ItemLink.tsx

@@ -1,7 +1,6 @@
 import { Flexbox, Icon } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { type LucideIcon, SquareArrowOutUpRight } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 
 export interface ItemLinkProps {
@@ -13,12 +12,12 @@ export interface ItemLinkProps {
 
 const ItemLink = memo<ItemLinkProps>(({ label, href }) => {
   return (
-    <Link href={href} style={{ color: 'inherit' }} target={'_blank'}>
+    <a href={href} rel="noreferrer" style={{ color: 'inherit' }} target="_blank">
       <Flexbox align={'center'} gap={8} horizontal>
         {label}
         <Icon color={cssVar.colorTextDescription} icon={SquareArrowOutUpRight} size={14} />
       </Flexbox>
-    </Link>
+    </a>
   );
 });
 

package/src/app/[variants]/(main)/settings/about/features/Version.tsx

@@ -1,7 +1,6 @@
 import { BRANDING_NAME } from '@lobechat/business-const';
 import { Block, Button, Flexbox, Tag } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -31,7 +30,7 @@ const Version = memo<{ mobile?: boolean }>(({ mobile }) => {
       width={'100%'}
     >
       <Flexbox align={'center'} flex={'none'} gap={16} horizontal>
-        <Link href={OFFICIAL_SITE} target={'_blank'}>
+        <a href={OFFICIAL_SITE} rel="noreferrer" target="_blank">
           <Block
             align={'center'}
             className={styles.logo}
@@ -42,7 +41,7 @@ const Version = memo<{ mobile?: boolean }>(({ mobile }) => {
           >
             <ProductLogo size={52} />
           </Block>
-        </Link>
+        </a>
         <Flexbox align={'flex-start'} gap={6}>
           <div style={{ fontSize: 18, fontWeight: 'bolder' }}>{BRANDING_NAME}</div>
           <Flexbox gap={6} horizontal={!mobile}>
@@ -56,15 +55,15 @@ const Version = memo<{ mobile?: boolean }>(({ mobile }) => {
         </Flexbox>
       </Flexbox>
       <Flexbox flex={mobile ? 1 : undefined} gap={8} horizontal>
-        <Link href={CHANGELOG_URL} style={{ flex: 1 }} target={'_blank'}>
+        <a href={CHANGELOG_URL} rel="noreferrer" style={{ flex: 1 }} target="_blank">
           <Button block={mobile}>{t('changelog')}</Button>
-        </Link>
+        </a>
         {hasNewVersion && (
-          <Link href={MANUAL_UPGRADE_URL} style={{ flex: 1 }} target={'_blank'}>
+          <a href={MANUAL_UPGRADE_URL} rel="noreferrer" style={{ flex: 1 }} target="_blank">
             <Button block={mobile} type={'primary'}>
               {t('upgradeVersion.action')}
             </Button>
-          </Link>
+          </a>
         )}
       </Flexbox>
     </Flexbox>

package/src/app/[variants]/(main)/settings/features/SettingsContent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ENABLE_BUSINESS_FEATURES } from '@lobechat/business-const';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { Fragment } from 'react';
 
 import Loading from '@/components/Loading/BrandTextLoading';

package/src/app/[variants]/(main)/settings/features/UpgradeAlert.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { Alert, Button, Flexbox } from '@lobehub/ui';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,16 +19,17 @@ const UpgradeAlert = memo(() => {
       title={
         <Flexbox gap={8}>
           <p>{t('upgradeVersion.newVersion', { version: `v${latestVersion}` })}</p>
-          <Link
+          <a
             aria-label={t('upgradeVersion.action')}
             href={MANUAL_UPGRADE_URL}
+            rel="noreferrer"
             style={{ marginBottom: 6 }}
-            target={'_blank'}
+            target="_blank"
           >
             <Button block size={'small'} type={'primary'}>
               {t('upgradeVersion.action')}
             </Button>
-          </Link>
+          </a>
         </Flexbox>
       }
       type={'info'}

package/src/app/[variants]/(main)/settings/provider/(list)/Footer.tsx

@@ -2,7 +2,6 @@
 
 import { Center } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -24,10 +23,11 @@ const Footer = memo(() => {
         <Trans
           components={[
             <span key="0" />,
-            <Link
+            <a
               aria-label={t('llm.waitingForMoreLinkAriaLabel')}
               href={MORE_MODEL_PROVIDER_REQUEST_URL}
               key="1"
+              rel="noreferrer"
               target="_blank"
             />,
           ]}

package/src/app/[variants]/(main)/settings/provider/detail/index.tsx

@@ -1,4 +1,4 @@
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 

package/src/app/[variants]/(main)/settings/provider/detail/ollama/CheckError.tsx

@@ -1,6 +1,6 @@
 import { type ChatMessageError } from '@lobechat/types';
 import { Skeleton } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type ReactNode } from 'react';
 
 import Container from './Container';

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -16,7 +16,6 @@ import { useDebounceFn } from 'ahooks';
 import { Form as AntdForm, Switch } from 'antd';
 import { createStaticStyles, cssVar, cx, responsive } from 'antd-style';
 import { Loader2Icon, LockIcon } from 'lucide-react';
-import Link from 'next/link';
 import { type ReactNode, memo, useCallback, useLayoutEffect, useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
@@ -261,7 +260,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
                   <span key="0" />,
                   <span key="1" />,
                   <span key="2" />,
-                  <Link href={apiKeyUrl} key="3" target={'_blank'} />,
+                  <a href={apiKeyUrl} key="3" rel="noreferrer" target="_blank" />,
                 ]}
                 i18nKey="providerModels.config.apiKey.descWithUrl"
                 ns={'modelProvider'}
@@ -282,7 +281,13 @@ const ProviderConfig = memo<ProviderConfigProps>(
           <Trans
             components={[
               <span key="0" />,
-              <Link href={AES_GCM_URL} key="1" style={{ marginInline: 4 }} target={'_blank'} />,
+              <a
+                href={AES_GCM_URL}
+                key="1"
+                rel="noreferrer"
+                style={{ marginInline: 4 }}
+                target="_blank"
+              />,
             ]}
             i18nKey="providerModels.config.aesGcm"
             ns={'modelProvider'}
@@ -437,15 +442,16 @@ const ProviderConfig = memo<ProviderConfigProps>(
             <>
               {title ?? <ProviderCombine provider={id} size={24} />}
               <Tooltip title={t('providerModels.config.helpDoc')}>
-                <Link
+                <a
                   href={urlJoin(BASE_PROVIDER_DOC_URL, id)}
                   onClick={(e) => e.stopPropagation()}
-                  target={'_blank'}
+                  rel="noreferrer"
+                  target="_blank"
                 >
                   <Center className={styles.help} height={20} width={20}>
                     ?
                   </Center>
-                </Link>
+                </a>
               </Tooltip>
             </>
           )}

package/src/app/[variants]/(main)/settings/security/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Skeleton } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 

package/src/app/[variants]/(main)/settings/stats/features/overview/ShareButton/ShareModal.tsx

@@ -3,7 +3,7 @@
 import { type FormItemProps, FormModal, type FormModalProps, Segmented } from '@lobehub/ui';
 import { Skeleton } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/settings/stats/features/rankings/AssistantsRank.tsx

@@ -1,7 +1,7 @@
 import { BarList } from '@lobehub/charts';
 import { ActionIcon, Avatar, Modal } from '@lobehub/ui';
 import { MaximizeIcon } from 'lucide-react';
-import Link from 'next/link';
+import Link from '@/libs/router/Link';
 import qs from 'query-string';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/app/[variants]/(main)/settings/stats/features/rankings/TopicsRank.tsx

@@ -2,7 +2,7 @@ import { BarList } from '@lobehub/charts';
 import { ActionIcon, Icon, Modal } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { MaximizeIcon, MessageSquareIcon } from 'lucide-react';
-import Link from 'next/link';
+import Link from '@/libs/router/Link';
 import qs from 'query-string';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/app/[variants]/(mobile)/_layout/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type FC, Suspense } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 

package/src/app/[variants]/(mobile)/chat/settings/features/AgentInfoDescription/index.tsx

@@ -3,7 +3,7 @@
 import { ProDescriptions } from '@ant-design/pro-components';
 import { type AgentItemDetail } from '@lobehub/market-sdk';
 import { Flexbox, Tag } from '@lobehub/ui';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(mobile)/chat/settings/features/SettingButton.tsx

@@ -2,12 +2,12 @@
 
 import { ActionIcon } from '@lobehub/ui';
 import { AlignJustify } from 'lucide-react';
-import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
+import dynamic from '@/libs/next/dynamic';
 import { useSessionStore } from '@/store/session';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';

package/src/app/[variants]/(mobile)/router/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 

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

@@ -1,4 +1,4 @@
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 import { type DynamicLayoutProps } from '@/types/next';

package/src/app/[variants]/router/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 

package/src/components/404/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { Button, Flexbox, FluentEmoji } from '@lobehub/ui';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -32,9 +31,10 @@ const NotFound = memo(() => {
         <div>{t('notFound.desc')}</div>
         <div style={{ marginTop: '0.5em' }}>{t('notFound.check')}</div>
       </div>
-      <Link href="/">
-        <Button type={'primary'}>{t('notFound.backHome')}</Button>
-      </Link>
+
+      <Button onClick={() => (window.location.href = '/')} type={'primary'}>
+        {t('notFound.backHome')}
+      </Button>
     </Flexbox>
   );
 });

package/src/components/Analytics/index.tsx

@@ -1,4 +1,4 @@
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 
 import { isDesktop } from '@/const/version';
 import { analyticsEnv } from '@/envs/analytics';

package/src/components/BrandWatermark/index.tsx

@@ -4,7 +4,6 @@ import { ORG_NAME, UTM_SOURCE } from '@lobechat/business-const';
 import { Flexbox, type FlexboxProps } from '@lobehub/ui';
 import { LobeHub } from '@lobehub/ui/brand';
 import { createStaticStyles, cssVar } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 
 import { isCustomORG } from '@/const/version';
@@ -35,13 +34,14 @@ const BrandWatermark = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest })
       {isCustomORG ? (
         <span>{ORG_NAME}</span>
       ) : (
-        <Link
+        <a
           className={styles.logoLink}
           href={`https://lobehub.com?utm_source=${UTM_SOURCE}&utm_content=brand_watermark`}
-          target={'_blank'}
+          rel="noreferrer"
+          target="_blank"
         >
           <LobeHub size={20} type={'text'} />
-        </Link>
+        </a>
       )}
     </Flexbox>
   );

package/src/components/Branding/ProductLogo/Custom.tsx

@@ -3,7 +3,7 @@ import type { IconType } from '@lobehub/icons';
 import { Flexbox, type FlexboxProps } from '@lobehub/ui';
 import type { LobeChatProps } from '@lobehub/ui/brand';
 import { createStaticStyles, cssVar } from 'antd-style';
-import Image, { type ImageProps } from 'next/image';
+import Image, { type ImageProps } from '@/libs/next/Image';
 import { type ReactNode, forwardRef, memo } from 'react';
 
 const styles = createStaticStyles(({ css }) => {

package/src/components/Error/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { Button, Flexbox, FluentEmoji } from '@lobehub/ui';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -39,9 +38,9 @@ const ErrorCapture = memo<ErrorCaptureProps>(({ reset }) => {
       <p style={{ marginBottom: '2em' }}>{t('error.desc')}</p>
       <Flexbox gap={12} horizontal style={{ marginBottom: '1em' }}>
         <Button onClick={() => reset()}>{t('error.retry')}</Button>
-        <Link href="/">
-          <Button type={'primary'}>{t('error.backHome')}</Button>
-        </Link>
+        <Button onClick={() => (window.location.href = '/')} type={'primary'}>
+          {t('error.backHome')}
+        </Button>
       </Flexbox>
     </Flexbox>
   );

package/src/components/GoBack/index.tsx

@@ -1,9 +1,9 @@
 import { Flexbox, Icon } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { ArrowLeft } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 const styles = createStaticStyles(({ css }) => {
   return {
@@ -31,7 +31,7 @@ const GoBack = memo<GoBackProps>(({ href }) => {
   const { t } = useTranslation('components');
 
   return (
-    <Link href={href}>
+    <Link to={href}>
       <Flexbox align={'center'} className={styles.container} gap={4} horizontal>
         <Icon icon={ArrowLeft} />
         <div>{t('GoBack.back')}</div>

package/src/components/LabsModal/LabCard.tsx

@@ -3,7 +3,7 @@
 import { Flexbox } from '@lobehub/ui';
 import { Switch } from 'antd';
 import { createStaticStyles, cssVar } from 'antd-style';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import { type PropsWithChildren, memo } from 'react';
 
 import { SkeletonSwitch } from '@/components/Skeleton';

package/src/components/Link.tsx

@@ -1,12 +1,32 @@
-import NextLink, { type LinkProps as NextLinkProps } from 'next/link';
-import React, { memo } from 'react';
+import React, { type AnchorHTMLAttributes, memo } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
 
-interface LinkProps extends NextLinkProps {
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   children?: React.ReactNode | undefined;
+  href?: string;
 }
 
-const Link = memo<LinkProps>((props) => {
-  return <NextLink {...props} prefetch={false} />;
+/**
+ * Smart Link component for global use.
+ * - External links (http://, https://) → native <a> tag
+ * - Internal routes → React Router Link
+ */
+const Link = memo<LinkProps>(({ href, children, ...props }) => {
+  // External links use native <a> tag
+  if (href?.startsWith('http://') || href?.startsWith('https://')) {
+    return (
+      <a href={href} rel="noreferrer" {...props}>
+        {children}
+      </a>
+    );
+  }
+
+  // Internal routes use React Router Link
+  return (
+    <RouterLink to={href || '/'} {...props}>
+      {children}
+    </RouterLink>
+  );
 });
 
 export default Link;