@lobehub/lobehub 2.0.0-next.294 → 2.0.0-next.296

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;

package/src/components/OllamaSetupGuide/index.tsx

@@ -2,7 +2,6 @@ import { ProviderCombine } from '@lobehub/icons';
 import { Flexbox, Highlighter, Snippet, Tabs } from '@lobehub/ui';
 import { Steps } from 'antd';
 import { createStaticStyles, cssVar } from 'antd-style';
-import Link from 'next/link';
 import { readableColor } from 'polished';
 import React, { memo, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -48,7 +47,7 @@ const SetupGuide = memo(() => {
                       <Trans
                         components={[
                           <span key="0" />,
-                          <Link href={'https://ollama.com/download'} key="1" />,
+                          <a href={'https://ollama.com/download'} key="1" rel="noreferrer" target="_blank" />,
                         ]}
                         i18nKey={'OllamaSetupGuide.install.description'}
                         ns={'components'}
@@ -94,7 +93,7 @@ const SetupGuide = memo(() => {
                       <Trans
                         components={[
                           <span key="0" />,
-                          <Link href={'https://ollama.com/download'} key="1" />,
+                          <a href={'https://ollama.com/download'} key="1" rel="noreferrer" target="_blank" />,
                         ]}
                         i18nKey={'OllamaSetupGuide.install.description'}
                         ns={'components'}
@@ -139,9 +138,11 @@ const SetupGuide = memo(() => {
                           <Trans
                             components={[
                               <span key="0" />,
-                              <Link
+                              <a
                                 href={'https://github.com/ollama/ollama/blob/main/docs/linux.md'}
                                 key="1"
+                                rel="noreferrer"
+                                target="_blank"
                               />,
                             ]}
                             i18nKey={'OllamaSetupGuide.install.linux.manual'}

package/src/components/WebFavicon/index.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 
 interface WebFaviconProps {
   alt?: string;

package/src/components/client/ClientResponsiveContent/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { type Loader } from 'next/dist/shared/lib/dynamic';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type FC, memo } from 'react';
 
 import MobileSwitchLoading from '@/features/MobileSwitchLoading';

package/src/components/client/ClientResponsiveLayout.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { type Loader } from 'next/dist/shared/lib/dynamic';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type FC, type PropsWithChildren, memo } from 'react';
 
 import MobileSwitchLoading from '@/features/MobileSwitchLoading';

package/src/components/mdx/Image.tsx

@@ -1,7 +1,7 @@
 'use server';
 
 import { Image } from '@lobehub/ui/mdx';
-import Img from 'next/image';
+import Img from '@/libs/next/Image';
 import { getPlaiceholder } from 'plaiceholder';
 import { type FC } from 'react';
 

package/src/components/mdx/Link.tsx

@@ -1,20 +1,37 @@
 'use client';
 
-import Link, { type LinkProps } from 'next/link';
-import { type FC } from 'react';
+import { type AnchorHTMLAttributes, type FC } from 'react';
+import { Link } from 'react-router-dom';
 
 const EXTERNAL_HREF_REGEX = /https?:\/\//;
 
-const A: FC<LinkProps> = ({ href = '', ...props }) => {
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href?: string;
+}
+
+const A: FC<LinkProps> = ({ href = '', children, ...props }) => {
   const isOutbound = EXTERNAL_HREF_REGEX.test(href as string);
   const isOfficial = String(href).includes('lobechat') || String(href).includes('lobehub');
+
+  // External links use native <a> tag
+  if (isOutbound) {
+    return (
+      <a
+        href={href}
+        rel={isOfficial ? 'noreferrer' : 'nofollow noreferrer'}
+        target="_blank"
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  // Internal links use React Router
   return (
-    <Link
-      href={href}
-      rel={isOutbound && !isOfficial ? 'nofollow' : undefined}
-      target={isOutbound ? '_blank' : undefined}
-      {...props}
-    />
+    <Link to={href} {...props}>
+      {children}
+    </Link>
   );
 };
 

package/src/features/AlertBanner/CloudBanner.tsx

@@ -5,7 +5,6 @@ import { Button, Center, Flexbox, Icon, lobeStaticStylish } from '@lobehub/ui';
 import { useSize } from 'ahooks';
 import { createStaticStyles, cx } from 'antd-style';
 import { ArrowRightIcon } from 'lucide-react';
-import Link from 'next/link';
 import { memo, useEffect, useRef, useState } from 'react';
 import Marquee from 'react-fast-marquee';
 import { useTranslation } from 'react-i18next';
@@ -83,11 +82,11 @@ const CloudBanner = memo<{ mobile?: boolean }>(({ mobile }) => {
       <div className={styles.background} />
       <Center className={styles.wrapper} gap={16} horizontal width={'100%'}>
         {isTruncated ? <Marquee pauseOnHover>{content}</Marquee> : content}
-        <Link href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}&utm_medium=banner`} target={'_blank'}>
+        <a href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}&utm_medium=banner`} rel="noreferrer" target="_blank">
           <Button size={'small'} type="primary">
             {t('alert.cloud.action')} <Icon icon={ArrowRightIcon} />
           </Button>
-        </Link>
+        </a>
       </Center>
     </Center>
   );