diff --git a/web/__tests__/apps/app-card-operations-flow.test.tsx b/web/__tests__/apps/app-card-operations-flow.test.tsx
index c3e8410955..c5766878a1 100644
--- a/web/__tests__/apps/app-card-operations-flow.test.tsx
+++ b/web/__tests__/apps/app-card-operations-flow.test.tsx
@@ -29,7 +29,7 @@ const mockOnPlanInfoChanged = vi.fn()
 const mockDeleteAppMutation = vi.fn().mockResolvedValue(undefined)
 let mockDeleteMutationPending = false
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
   }),
@@ -57,7 +57,7 @@ vi.mock('@headlessui/react', async () => {
   }
 })
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (loader: () => Promise<{ default: React.ComponentType }>) => {
     let Component: React.ComponentType<Record<string, unknown>> | null = null
     loader().then((mod) => {
diff --git a/web/__tests__/apps/app-list-browsing-flow.test.tsx b/web/__tests__/apps/app-list-browsing-flow.test.tsx
index 079f667dbc..1be7e56086 100644
--- a/web/__tests__/apps/app-list-browsing-flow.test.tsx
+++ b/web/__tests__/apps/app-list-browsing-flow.test.tsx
@@ -38,7 +38,7 @@ let mockShowTagManagementModal = false
 const mockRouterPush = vi.fn()
 const mockRouterReplace = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
     replace: mockRouterReplace,
@@ -46,7 +46,7 @@ vi.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (_loader: () => Promise<{ default: React.ComponentType }>) => {
     const LazyComponent = (props: Record<string, unknown>) => {
       return <div data-testid="dynamic-component" {...props} />
diff --git a/web/__tests__/apps/create-app-flow.test.tsx b/web/__tests__/apps/create-app-flow.test.tsx
index 4ac9824ddd..bc1f7a3a06 100644
--- a/web/__tests__/apps/create-app-flow.test.tsx
+++ b/web/__tests__/apps/create-app-flow.test.tsx
@@ -35,7 +35,7 @@ const mockRouterPush = vi.fn()
 const mockRouterReplace = vi.fn()
 const mockOnPlanInfoChanged = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
     replace: mockRouterReplace,
@@ -117,7 +117,7 @@ vi.mock('ahooks', async () => {
 })
 
 // Mock dynamically loaded modals with test stubs
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (loader: () => Promise<{ default: React.ComponentType }>) => {
     let Component: React.ComponentType<Record<string, unknown>> | null = null
     loader().then((mod) => {
diff --git a/web/__tests__/billing/billing-integration.test.tsx b/web/__tests__/billing/billing-integration.test.tsx
index 4891760df4..64d358cbe6 100644
--- a/web/__tests__/billing/billing-integration.test.tsx
+++ b/web/__tests__/billing/billing-integration.test.tsx
@@ -64,7 +64,7 @@ vi.mock('@/service/use-education', () => ({
 
 // ─── Navigation mocks ───────────────────────────────────────────────────────
 const mockRouterPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mockRouterPush }),
   usePathname: () => '/billing',
   useSearchParams: () => new URLSearchParams(),
diff --git a/web/__tests__/billing/cloud-plan-payment-flow.test.tsx b/web/__tests__/billing/cloud-plan-payment-flow.test.tsx
index e01d9250fd..bd3b6aa8d8 100644
--- a/web/__tests__/billing/cloud-plan-payment-flow.test.tsx
+++ b/web/__tests__/billing/cloud-plan-payment-flow.test.tsx
@@ -54,7 +54,7 @@ vi.mock('@/app/components/base/toast', () => ({
 }))
 
 // ─── Navigation mocks ───────────────────────────────────────────────────────
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/billing',
   useSearchParams: () => new URLSearchParams(),
diff --git a/web/__tests__/billing/education-verification-flow.test.tsx b/web/__tests__/billing/education-verification-flow.test.tsx
index 8c35cd9a8c..707f1d690a 100644
--- a/web/__tests__/billing/education-verification-flow.test.tsx
+++ b/web/__tests__/billing/education-verification-flow.test.tsx
@@ -63,7 +63,7 @@ vi.mock('@/service/use-billing', () => ({
 }))
 
 // ─── Navigation mocks ───────────────────────────────────────────────────────
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mockRouterPush }),
   usePathname: () => '/billing',
   useSearchParams: () => new URLSearchParams(),
diff --git a/web/__tests__/billing/partner-stack-flow.test.tsx b/web/__tests__/billing/partner-stack-flow.test.tsx
index 4f265478cd..fe642ac70b 100644
--- a/web/__tests__/billing/partner-stack-flow.test.tsx
+++ b/web/__tests__/billing/partner-stack-flow.test.tsx
@@ -18,7 +18,7 @@ let mockSearchParams = new URLSearchParams()
 const mockMutateAsync = vi.fn()
 
 // ─── Module mocks ────────────────────────────────────────────────────────────
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSearchParams: () => mockSearchParams,
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/',
diff --git a/web/__tests__/billing/pricing-modal-flow.test.tsx b/web/__tests__/billing/pricing-modal-flow.test.tsx
index 6b8fb57f83..3e9200c63f 100644
--- a/web/__tests__/billing/pricing-modal-flow.test.tsx
+++ b/web/__tests__/billing/pricing-modal-flow.test.tsx
@@ -51,7 +51,7 @@ vi.mock('@/hooks/use-async-window-open', () => ({
 }))
 
 // ─── Navigation mocks ───────────────────────────────────────────────────────
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/billing',
   useSearchParams: () => new URLSearchParams(),
diff --git a/web/__tests__/datasets/document-management.test.tsx b/web/__tests__/datasets/document-management.test.tsx
index 8aedd4fc63..f9d80520ed 100644
--- a/web/__tests__/datasets/document-management.test.tsx
+++ b/web/__tests__/datasets/document-management.test.tsx
@@ -13,7 +13,7 @@ import { DataSourceType } from '@/models/datasets'
 import { renderHookWithNuqs } from '@/test/nuqs-testing'
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(''),
   useRouter: () => ({ push: mockPush }),
   usePathname: () => '/datasets/ds-1/documents',
diff --git a/web/__tests__/document-detail-navigation-fix.test.tsx b/web/__tests__/document-detail-navigation-fix.test.tsx
index 6b348cd15b..5cb115830e 100644
--- a/web/__tests__/document-detail-navigation-fix.test.tsx
+++ b/web/__tests__/document-detail-navigation-fix.test.tsx
@@ -7,12 +7,12 @@ import type { Mock } from 'vitest'
  */
 
 import { fireEvent, render, screen } from '@testing-library/react'
-import { useRouter } from 'next/navigation'
+import { useRouter } from '@/next/navigation'
 import { useDocumentDetail, useDocumentMetadata } from '@/service/knowledge/use-document'
 
 // Mock Next.js router
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(() => ({
     push: mockPush,
   })),
diff --git a/web/__tests__/embedded-user-id-auth.test.tsx b/web/__tests__/embedded-user-id-auth.test.tsx
index 9231ac6199..cacd6331f8 100644
--- a/web/__tests__/embedded-user-id-auth.test.tsx
+++ b/web/__tests__/embedded-user-id-auth.test.tsx
@@ -8,7 +8,7 @@ const replaceMock = vi.fn()
 const backMock = vi.fn()
 const useSearchParamsMock = vi.fn(() => new URLSearchParams())
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: vi.fn(() => '/chatbot/test-app'),
   useRouter: vi.fn(() => ({
     replace: replaceMock,
diff --git a/web/__tests__/embedded-user-id-store.test.tsx b/web/__tests__/embedded-user-id-store.test.tsx
index 901218e76b..04597ccfeb 100644
--- a/web/__tests__/embedded-user-id-store.test.tsx
+++ b/web/__tests__/embedded-user-id-store.test.tsx
@@ -4,7 +4,7 @@ import WebAppStoreProvider, { useWebAppStore } from '@/context/web-app-context'
 
 import { AccessMode } from '@/models/access-control'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: vi.fn(() => '/chatbot/sample-app'),
   useSearchParams: vi.fn(() => {
     const params = new URLSearchParams()
diff --git a/web/__tests__/explore/sidebar-lifecycle-flow.test.tsx b/web/__tests__/explore/sidebar-lifecycle-flow.test.tsx
index e2c18bcc4f..77f493ab18 100644
--- a/web/__tests__/explore/sidebar-lifecycle-flow.test.tsx
+++ b/web/__tests__/explore/sidebar-lifecycle-flow.test.tsx
@@ -19,7 +19,7 @@ const mockUninstall = vi.fn()
 const mockUpdatePinStatus = vi.fn()
 let mockInstalledApps: InstalledApp[] = []
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegments: () => mockSegments,
   useRouter: () => ({
     push: mockPush,
diff --git a/web/__tests__/share/text-generation-index-flow.test.tsx b/web/__tests__/share/text-generation-index-flow.test.tsx
index 3292474bec..2fec054a47 100644
--- a/web/__tests__/share/text-generation-index-flow.test.tsx
+++ b/web/__tests__/share/text-generation-index-flow.test.tsx
@@ -5,7 +5,7 @@ import TextGeneration from '@/app/components/share/text-generation'
 
 const useSearchParamsMock = vi.fn(() => new URLSearchParams())
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSearchParams: () => useSearchParamsMock(),
 }))
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
index fd0bf2c8bd..0c87fd1a4d 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
@@ -13,8 +13,6 @@ import {
   RiTerminalWindowLine,
 } from '@remixicon/react'
 import { useUnmount } from 'ahooks'
-import dynamic from 'next/dynamic'
-import { usePathname, useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -26,6 +24,8 @@ import { useStore as useTagStore } from '@/app/components/base/tag-management/st
 import { useAppContext } from '@/context/app-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
+import dynamic from '@/next/dynamic'
+import { usePathname, useRouter } from '@/next/navigation'
 import { fetchAppDetailDirect } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
index 5e7d98d191..1a2ec30ff9 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -7,7 +7,6 @@ import {
   RiEqualizer2Line,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,6 +16,7 @@ import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
 import Indicator from '@/app/components/header/indicator'
 import { useAppContext } from '@/context/app-context'
+import { usePathname } from '@/next/navigation'
 import { fetchTracingConfig as doFetchTracingConfig, fetchTracingStatus, updateTracingStatus } from '@/service/apps'
 import { cn } from '@/utils/classnames'
 import ConfigButton from './config-button'
@@ -254,7 +254,7 @@ const Panel: FC = () => {
             )}
           >
             <TracingIcon size="md" />
-            <div className="system-sm-semibold mx-2 text-text-secondary">{t(`${I18N_PREFIX}.title`, { ns: 'app' })}</div>
+            <div className="mx-2 text-text-secondary system-sm-semibold">{t(`${I18N_PREFIX}.title`, { ns: 'app' })}</div>
             <div className="rounded-md p-1">
               <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
             </div>
@@ -294,7 +294,7 @@ const Panel: FC = () => {
           >
             <div className="ml-4 mr-1 flex items-center">
               <Indicator color={enabled ? 'green' : 'gray'} />
-              <div className="system-xs-semibold-uppercase ml-1.5 text-text-tertiary">
+              <div className="ml-1.5 text-text-tertiary system-xs-semibold-uppercase">
                 {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`, { ns: 'app' })}
               </div>
             </div>
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index 4f3f724e62..730b76ee19 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -9,7 +9,6 @@ import {
   RiFocus2Fill,
   RiFocus2Line,
 } from '@remixicon/react'
-import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -23,6 +22,7 @@ import DatasetDetailContext from '@/context/dataset-detail'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { usePathname } from '@/next/navigation'
 import { useDatasetDetail, useDatasetRelatedApps } from '@/service/knowledge/use-dataset'
 import { cn } from '@/utils/classnames'
 
diff --git a/web/app/(commonLayout)/datasets/layout.spec.tsx b/web/app/(commonLayout)/datasets/layout.spec.tsx
index 5873f344d0..9c01cffba8 100644
--- a/web/app/(commonLayout)/datasets/layout.spec.tsx
+++ b/web/app/(commonLayout)/datasets/layout.spec.tsx
@@ -6,7 +6,7 @@ import DatasetsLayout from './layout'
 const mockReplace = vi.fn()
 const mockUseAppContext = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: mockReplace,
   }),
diff --git a/web/app/(commonLayout)/datasets/layout.tsx b/web/app/(commonLayout)/datasets/layout.tsx
index b543c42570..a465f8222b 100644
--- a/web/app/(commonLayout)/datasets/layout.tsx
+++ b/web/app/(commonLayout)/datasets/layout.tsx
@@ -1,11 +1,11 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
 import { ExternalApiPanelProvider } from '@/context/external-api-panel-context'
 import { ExternalKnowledgeApiProvider } from '@/context/external-knowledge-api-context'
+import { useRouter } from '@/next/navigation'
 
 export default function DatasetsLayout({ children }: { children: React.ReactNode }) {
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator, currentWorkspace, isLoadingCurrentWorkspace } = useAppContext()
diff --git a/web/app/(commonLayout)/education-apply/page.tsx b/web/app/(commonLayout)/education-apply/page.tsx
index fce6fe1d5d..44ba5ee8ad 100644
--- a/web/app/(commonLayout)/education-apply/page.tsx
+++ b/web/app/(commonLayout)/education-apply/page.tsx
@@ -1,15 +1,15 @@
 'use client'
 
-import {
-  useRouter,
-  useSearchParams,
-} from 'next/navigation'
 import {
   useEffect,
   useMemo,
 } from 'react'
 import EducationApplyPage from '@/app/education-apply/education-apply-page'
 import { useProviderContext } from '@/context/provider-context'
+import {
+  useRouter,
+  useSearchParams,
+} from '@/next/navigation'
 
 export default function EducationApply() {
   const router = useRouter()
diff --git a/web/app/(commonLayout)/role-route-guard.spec.tsx b/web/app/(commonLayout)/role-route-guard.spec.tsx
index 87bf9be8af..ca1550f0b8 100644
--- a/web/app/(commonLayout)/role-route-guard.spec.tsx
+++ b/web/app/(commonLayout)/role-route-guard.spec.tsx
@@ -6,7 +6,7 @@ const mockReplace = vi.fn()
 const mockUseAppContext = vi.fn()
 let mockPathname = '/apps'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: () => mockPathname,
   useRouter: () => ({
     replace: mockReplace,
diff --git a/web/app/(commonLayout)/role-route-guard.tsx b/web/app/(commonLayout)/role-route-guard.tsx
index 1c42be9d15..483dfef095 100644
--- a/web/app/(commonLayout)/role-route-guard.tsx
+++ b/web/app/(commonLayout)/role-route-guard.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { usePathname, useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
+import { usePathname, useRouter } from '@/next/navigation'
 
 const datasetOperatorRedirectRoutes = ['/apps', '/app', '/explore', '/tools'] as const
 
diff --git a/web/app/(humanInputLayout)/form/[token]/form.tsx b/web/app/(humanInputLayout)/form/[token]/form.tsx
index d027ef8b7d..2b20cba5b7 100644
--- a/web/app/(humanInputLayout)/form/[token]/form.tsx
+++ b/web/app/(humanInputLayout)/form/[token]/form.tsx
@@ -9,7 +9,6 @@ import {
   RiInformation2Fill,
 } from '@remixicon/react'
 import { produce } from 'immer'
-import { useParams } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -21,6 +20,7 @@ import { getButtonStyle } from '@/app/components/base/chat/chat/answer/human-inp
 import Loading from '@/app/components/base/loading'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useParams } from '@/next/navigation'
 import { useGetHumanInputForm, useSubmitHumanInputForm } from '@/service/use-share'
 import { cn } from '@/utils/classnames'
 
@@ -106,17 +106,17 @@ const FormContent = () => {
               <RiCheckboxCircleFill className="h-8 w-8 text-text-success" />
             </div>
             <div className="grow">
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.thanks', { ns: 'share' })}</div>
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.recorded', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.thanks', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.recorded', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 text-text-tertiary system-2xs-regular-uppercase">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
               'flex shrink-0 items-center gap-1.5 px-1',
             )}
             >
-              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
               <DifyLogo size="small" />
             </div>
           </div>
@@ -134,17 +134,17 @@ const FormContent = () => {
               <RiInformation2Fill className="h-8 w-8 text-text-accent" />
             </div>
             <div className="grow">
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.expired', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.sorry', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.expired', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 text-text-tertiary system-2xs-regular-uppercase">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
               'flex shrink-0 items-center gap-1.5 px-1',
             )}
             >
-              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
               <DifyLogo size="small" />
             </div>
           </div>
@@ -162,17 +162,17 @@ const FormContent = () => {
               <RiInformation2Fill className="h-8 w-8 text-text-accent" />
             </div>
             <div className="grow">
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.completed', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.sorry', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.completed', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 text-text-tertiary system-2xs-regular-uppercase">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
               'flex shrink-0 items-center gap-1.5 px-1',
             )}
             >
-              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
               <DifyLogo size="small" />
             </div>
           </div>
@@ -190,7 +190,7 @@ const FormContent = () => {
               <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
             </div>
             <div className="grow">
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.rateLimitExceeded', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.rateLimitExceeded', { ns: 'share' })}</div>
             </div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
@@ -198,7 +198,7 @@ const FormContent = () => {
               'flex shrink-0 items-center gap-1.5 px-1',
             )}
             >
-              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
               <DifyLogo size="small" />
             </div>
           </div>
@@ -216,7 +216,7 @@ const FormContent = () => {
               <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
             </div>
             <div className="grow">
-              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.formNotFound', { ns: 'share' })}</div>
+              <div className="text-text-primary title-4xl-semi-bold">{t('humanInput.formNotFound', { ns: 'share' })}</div>
             </div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
@@ -224,7 +224,7 @@ const FormContent = () => {
               'flex shrink-0 items-center gap-1.5 px-1',
             )}
             >
-              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
               <DifyLogo size="small" />
             </div>
           </div>
@@ -245,7 +245,7 @@ const FormContent = () => {
           background={site.icon_background}
           imageUrl={site.icon_url}
         />
-        <div className="system-xl-semibold grow text-text-primary">{site.title}</div>
+        <div className="grow text-text-primary system-xl-semibold">{site.title}</div>
       </div>
       <div className="h-0 w-full grow overflow-y-auto">
         <div className="border-components-divider-subtle rounded-[20px] border bg-chat-bubble-bg p-4 shadow-lg backdrop-blur-sm">
@@ -277,7 +277,7 @@ const FormContent = () => {
             'flex shrink-0 items-center gap-1.5 px-1',
           )}
           >
-            <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+            <div className="text-text-tertiary system-2xs-medium-uppercase">{t('chat.poweredBy', { ns: 'share' })}</div>
             <DifyLogo size="small" />
           </div>
         </div>
diff --git a/web/app/(shareLayout)/components/authenticated-layout.tsx b/web/app/(shareLayout)/components/authenticated-layout.tsx
index c874990448..420b11c6f5 100644
--- a/web/app/(shareLayout)/components/authenticated-layout.tsx
+++ b/web/app/(shareLayout)/components/authenticated-layout.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import { useWebAppStore } from '@/context/web-app-context'
+import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
 import { useGetUserCanAccessApp } from '@/service/access-control'
 import { useGetWebAppInfo, useGetWebAppMeta, useGetWebAppParams } from '@/service/use-share'
 import { webAppLogout } from '@/service/webapp-auth'
@@ -81,7 +81,7 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-y-2">
         <AppUnavailable className="h-auto w-auto" code={403} unknownReason="no permission." />
-        <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
+        <span className="cursor-pointer text-text-tertiary system-sm-regular" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
       </div>
     )
   }
diff --git a/web/app/(shareLayout)/components/splash.tsx b/web/app/(shareLayout)/components/splash.tsx
index a2b847f74f..1177fc507d 100644
--- a/web/app/(shareLayout)/components/splash.tsx
+++ b/web/app/(shareLayout)/components/splash.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC, PropsWithChildren } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import { useWebAppStore } from '@/context/web-app-context'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { fetchAccessToken } from '@/service/share'
 import { setWebAppAccessToken, setWebAppPassport, webAppLoginStatus, webAppLogout } from '@/service/webapp-auth'
 
@@ -95,7 +95,7 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-y-4">
         <AppUnavailable className="h-auto w-auto" code={code || t('common.appUnavailable', { ns: 'share' })} unknownReason={message} />
-        <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{code === '403' ? t('userProfile.logout', { ns: 'common' }) : t('login.backToHome', { ns: 'share' })}</span>
+        <span className="cursor-pointer text-text-tertiary system-sm-regular" onClick={backToHome}>{code === '403' ? t('userProfile.logout', { ns: 'common' }) : t('login.backToHome', { ns: 'share' })}</span>
       </div>
     )
   }
diff --git a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
index fbf45259e5..fed6878c73 100644
--- a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
@@ -1,14 +1,14 @@
 'use client'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import Countdown from '@/app/components/signin/countdown'
-
 import { useLocale } from '@/context/i18n'
+
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { sendWebAppResetPasswordCode, verifyWebAppResetPasswordCode } from '@/service/common'
 
 export default function CheckCode() {
@@ -69,8 +69,8 @@ export default function CheckCode() {
         <RiMailSendFill className="h-6 w-6 text-2xl" />
       </div>
       <div className="pb-4 pt-2">
-        <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <h2 className="text-text-primary title-4xl-semi-bold">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
+        <p className="mt-2 text-text-secondary body-md-regular">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -82,7 +82,7 @@ export default function CheckCode() {
 
       <form action="">
         <input type="text" className="hidden" />
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 text-text-secondary system-md-semibold">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className="mt-1" placeholder={t('checkCode.verificationCodePlaceholder', { ns: 'login' }) || ''} />
         <Button loading={loading} disabled={loading} className="my-3 w-full" variant="primary" onClick={verify}>{t('checkCode.verify', { ns: 'login' })}</Button>
         <Countdown onResend={resendCode} />
@@ -94,7 +94,7 @@ export default function CheckCode() {
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/(shareLayout)/webapp-reset-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/page.tsx
index 9b9a853cdd..d141d417cc 100644
--- a/web/app/(shareLayout)/webapp-reset-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/page.tsx
@@ -1,8 +1,6 @@
 'use client'
 import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -10,9 +8,11 @@ import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
-
 import { useLocale } from '@/context/i18n'
 import useDocumentTitle from '@/hooks/use-document-title'
+
+import Link from '@/next/link'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { sendResetPasswordCode } from '@/service/common'
 
 export default function CheckCode() {
@@ -74,8 +74,8 @@ export default function CheckCode() {
         <RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pb-4 pt-2">
-        <h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <h2 className="text-text-primary title-4xl-semi-bold">{t('resetPassword', { ns: 'login' })}</h2>
+        <p className="mt-2 text-text-secondary body-md-regular">
           {t('resetPasswordDesc', { ns: 'login' })}
         </p>
       </div>
@@ -83,7 +83,7 @@ export default function CheckCode() {
       <form onSubmit={noop}>
         <input type="text" className="hidden" />
         <div className="mb-2">
-          <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+          <label htmlFor="email" className="my-2 text-text-secondary system-md-semibold">{t('email', { ns: 'login' })}</label>
           <div className="mt-1">
             <Input id="email" type="email" disabled={loading} value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
           </div>
@@ -99,7 +99,7 @@ export default function CheckCode() {
         <div className="inline-block rounded-full bg-background-default-dimmed p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('backToLogin', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('backToLogin', { ns: 'login' })}</span>
       </Link>
     </div>
   )
diff --git a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
index 9f59e8f9eb..453c2a73c5 100644
--- a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
@@ -1,13 +1,13 @@
 'use client'
 import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import { validPassword } from '@/config'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { changeWebAppPasswordWithToken } from '@/service/common'
 import { cn } from '@/utils/classnames'
 
@@ -91,10 +91,10 @@ const ChangePasswordForm = () => {
       {!showSuccess && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h2 className="text-text-primary title-4xl-semi-bold">
               {t('changePassword', { ns: 'login' })}
             </h2>
-            <p className="body-md-regular mt-2 text-text-secondary">
+            <p className="mt-2 text-text-secondary body-md-regular">
               {t('changePasswordTip', { ns: 'login' })}
             </p>
           </div>
@@ -103,7 +103,7 @@ const ChangePasswordForm = () => {
             <div className="bg-white">
               {/* Password */}
               <div className="mb-5">
-                <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="password" className="my-2 text-text-secondary system-md-semibold">
                   {t('account.newPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
@@ -125,11 +125,11 @@ const ChangePasswordForm = () => {
                     </Button>
                   </div>
                 </div>
-                <div className="body-xs-regular mt-1 text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
+                <div className="mt-1 text-text-secondary body-xs-regular">{t('error.passwordInvalid', { ns: 'login' })}</div>
               </div>
               {/* Confirm Password */}
               <div className="mb-5">
-                <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="confirmPassword" className="my-2 text-text-secondary system-md-semibold">
                   {t('account.confirmPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
@@ -170,7 +170,7 @@ const ChangePasswordForm = () => {
             <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
               <RiCheckboxCircleFill className="h-6 w-6 text-text-success" />
             </div>
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h2 className="text-text-primary title-4xl-semi-bold">
               {t('passwordChangedTip', { ns: 'login' })}
             </h2>
           </div>
diff --git a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
index afea9d668b..fb6d70aa9b 100644
--- a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { FormEvent } from 'react'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -10,6 +9,7 @@ import Toast from '@/app/components/base/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
 import { useWebAppStore } from '@/context/web-app-context'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { sendWebAppEMailLoginCode, webAppEmailLoginWithCode } from '@/service/common'
 import { fetchAccessToken } from '@/service/share'
 import { setWebAppAccessToken, setWebAppPassport } from '@/service/webapp-auth'
@@ -110,8 +110,8 @@ export default function CheckCode() {
         <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pb-4 pt-2">
-        <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <h2 className="text-text-primary title-4xl-semi-bold">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
+        <p className="mt-2 text-text-secondary body-md-regular">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -122,7 +122,7 @@ export default function CheckCode() {
       </div>
 
       <form onSubmit={handleSubmit}>
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 text-text-secondary system-md-semibold">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input
           ref={codeInputRef}
           id="code"
@@ -142,7 +142,7 @@ export default function CheckCode() {
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/(shareLayout)/webapp-signin/components/external-member-sso-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/external-member-sso-auth.tsx
index 0776df036d..391479c870 100644
--- a/web/app/(shareLayout)/webapp-signin/components/external-member-sso-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/external-member-sso-auth.tsx
@@ -1,11 +1,11 @@
 'use client'
-import { useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect } from 'react'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { fetchWebOAuth2SSOUrl, fetchWebOIDCSSOUrl, fetchWebSAMLSSOUrl } from '@/service/share'
 import { SSOProtocol } from '@/types/feature'
 
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
index 5aa9d9f141..af1345dd86 100644
--- a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
@@ -1,5 +1,4 @@
 import { noop } from 'es-toolkit/function'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -8,6 +7,7 @@ import Toast from '@/app/components/base/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { sendWebAppEMailLoginCode } from '@/service/common'
 
 export default function MailAndCodeAuth() {
@@ -55,7 +55,7 @@ export default function MailAndCodeAuth() {
     <form onSubmit={noop}>
       <input type="text" className="hidden" />
       <div className="mb-2">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+        <label htmlFor="email" className="my-2 text-text-secondary system-md-semibold">{t('email', { ns: 'login' })}</label>
         <div className="mt-1">
           <Input id="email" type="email" value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
         </div>
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
index e49559401d..205c310640 100644
--- a/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
@@ -1,7 +1,5 @@
 'use client'
 import { noop } from 'es-toolkit/function'
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -10,6 +8,8 @@ import Toast from '@/app/components/base/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
 import { useWebAppStore } from '@/context/web-app-context'
+import Link from '@/next/link'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { webAppLogin } from '@/service/common'
 import { fetchAccessToken } from '@/service/share'
 import { setWebAppAccessToken, setWebAppPassport } from '@/service/webapp-auth'
@@ -112,7 +112,7 @@ export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAut
   return (
     <form onSubmit={noop}>
       <div className="mb-3">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">
+        <label htmlFor="email" className="my-2 text-text-secondary system-md-semibold">
           {t('email', { ns: 'login' })}
         </label>
         <div className="mt-1">
@@ -130,7 +130,7 @@ export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAut
 
       <div className="mb-3">
         <label htmlFor="password" className="my-2 flex items-center justify-between">
-          <span className="system-md-semibold text-text-secondary">{t('password', { ns: 'login' })}</span>
+          <span className="text-text-secondary system-md-semibold">{t('password', { ns: 'login' })}</span>
           <Link
             href={`/webapp-reset-password?${searchParams.toString()}`}
             className={`system-xs-regular ${isEmailSetup ? 'text-components-button-secondary-accent-text' : 'pointer-events-none text-components-button-secondary-accent-text-disabled'}`}
diff --git a/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
index d8f3854868..79d67dde5c 100644
--- a/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
 import Toast from '@/app/components/base/toast'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { fetchMembersOAuth2SSOUrl, fetchMembersOIDCSSOUrl, fetchMembersSAMLSSOUrl } from '@/service/share'
 import { SSOProtocol } from '@/types/feature'
 
diff --git a/web/app/(shareLayout)/webapp-signin/normalForm.tsx b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
index b15145346f..492b135819 100644
--- a/web/app/(shareLayout)/webapp-signin/normalForm.tsx
+++ b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
@@ -1,12 +1,12 @@
 'use client'
 import { RiContractLine, RiDoorLockLine, RiErrorWarningFill } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import { IS_CE_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import Link from '@/next/link'
 import { LicenseStatus } from '@/types/feature'
 import { cn } from '@/utils/classnames'
 import MailAndCodeAuth from './components/mail-and-code-auth'
@@ -60,8 +60,8 @@ const NormalForm = () => {
               <RiContractLine className="h-5 w-5" />
               <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
             </div>
-            <p className="system-sm-medium text-text-primary">{t('licenseLost', { ns: 'login' })}</p>
-            <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseLostTip', { ns: 'login' })}</p>
+            <p className="text-text-primary system-sm-medium">{t('licenseLost', { ns: 'login' })}</p>
+            <p className="mt-1 text-text-tertiary system-xs-regular">{t('licenseLostTip', { ns: 'login' })}</p>
           </div>
         </div>
       </div>
@@ -76,8 +76,8 @@ const NormalForm = () => {
               <RiContractLine className="h-5 w-5" />
               <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
             </div>
-            <p className="system-sm-medium text-text-primary">{t('licenseExpired', { ns: 'login' })}</p>
-            <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseExpiredTip', { ns: 'login' })}</p>
+            <p className="text-text-primary system-sm-medium">{t('licenseExpired', { ns: 'login' })}</p>
+            <p className="mt-1 text-text-tertiary system-xs-regular">{t('licenseExpiredTip', { ns: 'login' })}</p>
           </div>
         </div>
       </div>
@@ -92,8 +92,8 @@ const NormalForm = () => {
               <RiContractLine className="h-5 w-5" />
               <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
             </div>
-            <p className="system-sm-medium text-text-primary">{t('licenseInactive', { ns: 'login' })}</p>
-            <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseInactiveTip', { ns: 'login' })}</p>
+            <p className="text-text-primary system-sm-medium">{t('licenseInactive', { ns: 'login' })}</p>
+            <p className="mt-1 text-text-tertiary system-xs-regular">{t('licenseInactiveTip', { ns: 'login' })}</p>
           </div>
         </div>
       </div>
@@ -104,8 +104,8 @@ const NormalForm = () => {
     <>
       <div className="mx-auto mt-8 w-full">
         <div className="mx-auto w-full">
-          <h2 className="title-4xl-semi-bold text-text-primary">{systemFeatures.branding.enabled ? t('pageTitleForE', { ns: 'login' }) : t('pageTitle', { ns: 'login' })}</h2>
-          <p className="body-md-regular mt-2 text-text-tertiary">{t('welcome', { ns: 'login' })}</p>
+          <h2 className="text-text-primary title-4xl-semi-bold">{systemFeatures.branding.enabled ? t('pageTitleForE', { ns: 'login' }) : t('pageTitle', { ns: 'login' })}</h2>
+          <p className="mt-2 text-text-tertiary body-md-regular">{t('welcome', { ns: 'login' })}</p>
         </div>
         <div className="relative">
           <div className="mt-6 flex flex-col gap-3">
@@ -122,7 +122,7 @@ const NormalForm = () => {
                 <div className="h-px w-full bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent"></div>
               </div>
               <div className="relative flex justify-center">
-                <span className="system-xs-medium-uppercase px-2 text-text-tertiary">{t('or', { ns: 'login' })}</span>
+                <span className="px-2 text-text-tertiary system-xs-medium-uppercase">{t('or', { ns: 'login' })}</span>
               </div>
             </div>
           )}
@@ -134,7 +134,7 @@ const NormalForm = () => {
                     <MailAndCodeAuth />
                     {systemFeatures.enable_email_password_login && (
                       <div className="cursor-pointer py-1 text-center" onClick={() => { updateAuthType('password') }}>
-                        <span className="system-xs-medium text-components-button-secondary-accent-text">{t('usePassword', { ns: 'login' })}</span>
+                        <span className="text-components-button-secondary-accent-text system-xs-medium">{t('usePassword', { ns: 'login' })}</span>
                       </div>
                     )}
                   </>
@@ -144,7 +144,7 @@ const NormalForm = () => {
                     <MailAndPasswordAuth isEmailSetup={systemFeatures.is_email_setup} />
                     {systemFeatures.enable_email_code_login && (
                       <div className="cursor-pointer py-1 text-center" onClick={() => { updateAuthType('code') }}>
-                        <span className="system-xs-medium text-components-button-secondary-accent-text">{t('useVerificationCode', { ns: 'login' })}</span>
+                        <span className="text-components-button-secondary-accent-text system-xs-medium">{t('useVerificationCode', { ns: 'login' })}</span>
                       </div>
                     )}
                   </>
@@ -158,8 +158,8 @@ const NormalForm = () => {
                 <div className="shadows-shadow-lg mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
                   <RiDoorLockLine className="h-5 w-5" />
                 </div>
-                <p className="system-sm-medium text-text-primary">{t('noLoginMethod', { ns: 'login' })}</p>
-                <p className="system-xs-regular mt-1 text-text-tertiary">{t('noLoginMethodTip', { ns: 'login' })}</p>
+                <p className="text-text-primary system-sm-medium">{t('noLoginMethod', { ns: 'login' })}</p>
+                <p className="mt-1 text-text-tertiary system-xs-regular">{t('noLoginMethodTip', { ns: 'login' })}</p>
               </div>
               <div className="relative my-2 py-2">
                 <div className="absolute inset-0 flex items-center" aria-hidden="true">
@@ -170,11 +170,11 @@ const NormalForm = () => {
           )}
           {!systemFeatures.branding.enabled && (
             <>
-              <div className="system-xs-regular mt-2 block w-full text-text-tertiary">
+              <div className="mt-2 block w-full text-text-tertiary system-xs-regular">
                 {t('tosDesc', { ns: 'login' })}
               &nbsp;
                 <Link
-                  className="system-xs-medium text-text-secondary hover:underline"
+                  className="text-text-secondary system-xs-medium hover:underline"
                   target="_blank"
                   rel="noopener noreferrer"
                   href="https://dify.ai/terms"
@@ -183,7 +183,7 @@ const NormalForm = () => {
                 </Link>
               &nbsp;&&nbsp;
                 <Link
-                  className="system-xs-medium text-text-secondary hover:underline"
+                  className="text-text-secondary system-xs-medium hover:underline"
                   target="_blank"
                   rel="noopener noreferrer"
                   href="https://dify.ai/privacy"
@@ -192,11 +192,11 @@ const NormalForm = () => {
                 </Link>
               </div>
               {IS_CE_EDITION && (
-                <div className="w-hull system-xs-regular mt-2 block text-text-tertiary">
+                <div className="w-hull mt-2 block text-text-tertiary system-xs-regular">
                   {t('goToInit', { ns: 'login' })}
               &nbsp;
                   <Link
-                    className="system-xs-medium text-text-secondary hover:underline"
+                    className="text-text-secondary system-xs-medium hover:underline"
                     href="/install"
                   >
                     {t('setAdminAccount', { ns: 'login' })}
diff --git a/web/app/(shareLayout)/webapp-signin/page.tsx b/web/app/(shareLayout)/webapp-signin/page.tsx
index b3ad1d48a6..4310f0b18e 100644
--- a/web/app/(shareLayout)/webapp-signin/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/page.tsx
@@ -1,6 +1,5 @@
 'use client'
 import type { FC } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,6 +7,7 @@ import AppUnavailable from '@/app/components/base/app-unavailable'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWebAppStore } from '@/context/web-app-context'
 import { AccessMode } from '@/models/access-control'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { webAppLogout } from '@/service/webapp-auth'
 import ExternalMemberSsoAuth from './components/external-member-sso-auth'
 import NormalForm from './normalForm'
@@ -45,7 +45,7 @@ const WebSSOForm: FC = () => {
   if (!systemFeatures.webapp_auth.enabled) {
     return (
       <div className="flex h-full items-center justify-center">
-        <p className="system-xs-regular text-text-tertiary">{t('webapp.disabled', { ns: 'login' })}</p>
+        <p className="text-text-tertiary system-xs-regular">{t('webapp.disabled', { ns: 'login' })}</p>
       </div>
     )
   }
@@ -63,7 +63,7 @@ const WebSSOForm: FC = () => {
   return (
     <div className="flex h-full flex-col items-center justify-center gap-y-4">
       <AppUnavailable className="h-auto w-auto" isUnknownReason={true} />
-      <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
+      <span className="cursor-pointer text-text-tertiary system-sm-regular" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
     </div>
   )
 }
diff --git a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
index 463c27294a..f0dfd4f12f 100644
--- a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
+++ b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
@@ -1,7 +1,6 @@
 import type { ResponseError } from '@/service/fetch'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@@ -10,6 +9,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import { ToastContext } from '@/app/components/base/toast/context'
+import { useRouter } from '@/next/navigation'
 import {
   checkEmailExisted,
   resetEmail,
@@ -209,14 +209,14 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       </div>
       {step === STEP.start && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.title', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.title', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-medium text-text-warning">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
-            <div className="body-md-regular text-text-secondary">
+            <div className="text-text-warning body-md-medium">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
+            <div className="text-text-secondary body-md-regular">
               <Trans
                 i18nKey="account.changeEmail.content1"
                 ns="common"
-                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email }}
               />
             </div>
@@ -241,19 +241,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       )}
       {step === STEP.verifyOrigin && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-regular text-text-secondary">
+            <div className="text-text-secondary body-md-regular">
               <Trans
                 i18nKey="account.changeEmail.content2"
                 ns="common"
-                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email }}
               />
             </div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
             <Input
               className="!w-full"
               placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -278,25 +278,25 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
-          <div className="system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary">
+          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
             <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
             {time > 0 && (
               <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
             )}
             {!time && (
-              <span onClick={sendCodeToOriginEmail} className="system-xs-medium cursor-pointer text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              <span onClick={sendCodeToOriginEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
             )}
           </div>
         </>
       )}
       {step === STEP.newEmail && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-regular text-text-secondary">{t('account.changeEmail.content3', { ns: 'common' })}</div>
+            <div className="text-text-secondary body-md-regular">{t('account.changeEmail.content3', { ns: 'common' })}</div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
             <Input
               className="!w-full"
               placeholder={t('account.changeEmail.emailPlaceholder', { ns: 'common' })}
@@ -305,10 +305,10 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               destructive={newEmailExited || unAvailableEmail}
             />
             {newEmailExited && (
-              <div className="body-xs-regular mt-1 py-0.5 text-text-destructive">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
+              <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
             )}
             {unAvailableEmail && (
-              <div className="body-xs-regular mt-1 py-0.5 text-text-destructive">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
+              <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
             )}
           </div>
           <div className="mt-3 space-y-2">
@@ -331,19 +331,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       )}
       {step === STEP.verifyNew && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-regular text-text-secondary">
+            <div className="text-text-secondary body-md-regular">
               <Trans
                 i18nKey="account.changeEmail.content4"
                 ns="common"
-                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email: mail }}
               />
             </div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
             <Input
               className="!w-full"
               placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -368,13 +368,13 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
-          <div className="system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary">
+          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
             <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
             {time > 0 && (
               <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
             )}
             {!time && (
-              <span onClick={sendCodeToNewEmail} className="system-xs-medium cursor-pointer text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              <span onClick={sendCodeToNewEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
             )}
           </div>
         </>
diff --git a/web/app/account/(commonLayout)/avatar.tsx b/web/app/account/(commonLayout)/avatar.tsx
index 07b685b8c5..6a561ea231 100644
--- a/web/app/account/(commonLayout)/avatar.tsx
+++ b/web/app/account/(commonLayout)/avatar.tsx
@@ -3,7 +3,6 @@ import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/r
 import {
   RiGraduationCapFill,
 } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 import { resetUser } from '@/app/components/base/amplitude/utils'
@@ -11,6 +10,7 @@ import { Avatar } from '@/app/components/base/avatar'
 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
 import PremiumBadge from '@/app/components/base/premium-badge'
 import { useProviderContext } from '@/context/provider-context'
+import { useRouter } from '@/next/navigation'
 import { useLogout, useUserProfile } from '@/service/use-common'
 
 export type IAppSelector = {
@@ -77,7 +77,7 @@ export default function AppSelector() {
                   <div className="p-1">
                     <div className="flex flex-nowrap items-center px-3 py-2">
                       <div className="grow">
-                        <div className="system-md-medium break-all text-text-primary">
+                        <div className="break-all text-text-primary system-md-medium">
                           {userProfile.name}
                           {isEducationAccount && (
                             <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
@@ -86,7 +86,7 @@ export default function AppSelector() {
                             </PremiumBadge>
                           )}
                         </div>
-                        <div className="system-xs-regular break-all text-text-tertiary">{userProfile.email}</div>
+                        <div className="break-all text-text-tertiary system-xs-regular">{userProfile.email}</div>
                       </div>
                       <Avatar avatar={userProfile.avatar_url} name={userProfile.name} />
                     </div>
diff --git a/web/app/account/(commonLayout)/delete-account/components/check-email.tsx b/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
index 65a58c936e..f520ee930a 100644
--- a/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
@@ -1,10 +1,10 @@
 'use client'
-import Link from 'next/link'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import { useAppContext } from '@/context/app-context'
+import Link from '@/next/link'
 import { useSendDeleteAccountEmail } from '../state'
 
 type DeleteAccountProps = {
@@ -30,14 +30,14 @@ export default function CheckEmail(props: DeleteAccountProps) {
 
   return (
     <>
-      <div className="body-md-medium py-1 text-text-destructive">
+      <div className="py-1 text-text-destructive body-md-medium">
         {t('account.deleteTip', { ns: 'common' })}
       </div>
-      <div className="body-md-regular pb-2 pt-1 text-text-secondary">
+      <div className="pb-2 pt-1 text-text-secondary body-md-regular">
         {t('account.deletePrivacyLinkTip', { ns: 'common' })}
         <Link href="https://dify.ai/privacy" className="text-text-accent">{t('account.deletePrivacyLink', { ns: 'common' })}</Link>
       </div>
-      <label className="system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary">{t('account.deleteLabel', { ns: 'common' })}</label>
+      <label className="mb-1 mt-3 flex h-6 items-center text-text-secondary system-sm-semibold">{t('account.deleteLabel', { ns: 'common' })}</label>
       <Input
         placeholder={t('account.deletePlaceholder', { ns: 'common' }) as string}
         onChange={(e) => {
diff --git a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
index 67fea3c141..af82d4bc62 100644
--- a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
@@ -1,5 +1,4 @@
 'use client'
-import { useRouter } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -7,6 +6,7 @@ import CustomDialog from '@/app/components/base/dialog'
 import Textarea from '@/app/components/base/textarea'
 import Toast from '@/app/components/base/toast'
 import { useAppContext } from '@/context/app-context'
+import { useRouter } from '@/next/navigation'
 import { useLogout } from '@/service/use-common'
 import { useDeleteAccountFeedback } from '../state'
 
@@ -54,7 +54,7 @@ export default function FeedBack(props: DeleteAccountProps) {
       className="max-w-[480px]"
       footer={false}
     >
-      <label className="system-sm-semibold mb-1 mt-3 flex items-center text-text-secondary">{t('account.feedbackLabel', { ns: 'common' })}</label>
+      <label className="mb-1 mt-3 flex items-center text-text-secondary system-sm-semibold">{t('account.feedbackLabel', { ns: 'common' })}</label>
       <Textarea
         rows={6}
         value={userFeedback}
diff --git a/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx b/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
index d7590c27f9..341718ef16 100644
--- a/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
@@ -1,10 +1,10 @@
 'use client'
-import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Countdown from '@/app/components/signin/countdown'
+import Link from '@/next/link'
 import { useAccountDeleteStore, useConfirmDeleteAccount, useSendDeleteAccountEmail } from '../state'
 
 const CODE_EXP = /[A-Z\d]{6}/gi
@@ -36,14 +36,14 @@ export default function VerifyEmail(props: DeleteAccountProps) {
   }, [emailToken, verificationCode, confirmDeleteAccount, props])
   return (
     <>
-      <div className="body-md-medium pt-1 text-text-destructive">
+      <div className="pt-1 text-text-destructive body-md-medium">
         {t('account.deleteTip', { ns: 'common' })}
       </div>
-      <div className="body-md-regular pb-2 pt-1 text-text-secondary">
+      <div className="pb-2 pt-1 text-text-secondary body-md-regular">
         {t('account.deletePrivacyLinkTip', { ns: 'common' })}
         <Link href="https://dify.ai/privacy" className="text-text-accent">{t('account.deletePrivacyLink', { ns: 'common' })}</Link>
       </div>
-      <label className="system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary">{t('account.verificationLabel', { ns: 'common' })}</label>
+      <label className="mb-1 mt-3 flex h-6 items-center text-text-secondary system-sm-semibold">{t('account.verificationLabel', { ns: 'common' })}</label>
       <Input
         minLength={6}
         maxLength={6}
diff --git a/web/app/account/(commonLayout)/header.tsx b/web/app/account/(commonLayout)/header.tsx
index bb58be87a8..921e3ad833 100644
--- a/web/app/account/(commonLayout)/header.tsx
+++ b/web/app/account/(commonLayout)/header.tsx
@@ -1,11 +1,11 @@
 'use client'
 import { RiArrowRightUpLine, RiRobot2Line } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useRouter } from '@/next/navigation'
 import Avatar from './avatar'
 
 const Header = () => {
@@ -32,10 +32,10 @@ const Header = () => {
             : <DifyLogo />}
         </div>
         <div className="h-4 w-[1px] origin-center rotate-[11.31deg] bg-divider-regular" />
-        <p className="title-3xl-semi-bold relative mt-[-2px] text-text-primary">{t('account.account', { ns: 'common' })}</p>
+        <p className="relative mt-[-2px] text-text-primary title-3xl-semi-bold">{t('account.account', { ns: 'common' })}</p>
       </div>
       <div className="flex shrink-0 items-center gap-3">
-        <Button className="system-sm-medium gap-2 px-3 py-2" onClick={goToStudio}>
+        <Button className="gap-2 px-3 py-2 system-sm-medium" onClick={goToStudio}>
           <RiRobot2Line className="h-4 w-4" />
           <p>{t('account.studio', { ns: 'common' })}</p>
           <RiArrowRightUpLine className="h-4 w-4" />
diff --git a/web/app/account/oauth/authorize/page.tsx b/web/app/account/oauth/authorize/page.tsx
index 835a1e702e..5ca920343e 100644
--- a/web/app/account/oauth/authorize/page.tsx
+++ b/web/app/account/oauth/authorize/page.tsx
@@ -7,7 +7,6 @@ import {
   RiMailLine,
   RiTranslate2,
 } from '@remixicon/react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,6 +16,7 @@ import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { setPostLoginRedirect } from '@/app/signin/utils/post-login-redirect'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { useIsLogin, useUserProfile } from '@/service/use-common'
 import { useAuthorizeOAuthApp, useOAuthAppInfo } from '@/service/use-oauth'
 
diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index 421b816652..418d3b8bb1 100644
--- a/web/app/activate/activateForm.tsx
+++ b/web/app/activate/activateForm.tsx
@@ -1,11 +1,11 @@
 'use client'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
-
 import useDocumentTitle from '@/hooks/use-document-title'
+
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { useInvitationCheck } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
 
diff --git a/web/app/components/app-initializer.tsx b/web/app/components/app-initializer.tsx
index bf7aa39580..e08ece6666 100644
--- a/web/app/components/app-initializer.tsx
+++ b/web/app/components/app-initializer.tsx
@@ -2,13 +2,13 @@
 
 import type { ReactNode } from 'react'
 import Cookies from 'js-cookie'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { parseAsBoolean, useQueryState } from 'nuqs'
 import { useCallback, useEffect, useState } from 'react'
 import {
   EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION,
   EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
 } from '@/app/education-apply/constants'
+import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
 import { sendGAEvent } from '@/utils/gtag'
 import { fetchSetupStatusWithCache } from '@/utils/setup-status'
 import { resolvePostLoginRedirect } from '../signin/utils/post-login-redirect'
diff --git a/web/app/components/app-sidebar/__tests__/index.spec.tsx b/web/app/components/app-sidebar/__tests__/index.spec.tsx
index 89db80e0f1..b2e1e92bbb 100644
--- a/web/app/components/app-sidebar/__tests__/index.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/index.spec.tsx
@@ -19,7 +19,7 @@ vi.mock('zustand/react/shallow', () => ({
   useShallow: (fn: unknown) => fn,
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: () => mockPathname,
 }))
 
diff --git a/web/app/components/app-sidebar/__tests__/text-squeeze-fix-verification.spec.tsx b/web/app/components/app-sidebar/__tests__/text-squeeze-fix-verification.spec.tsx
index fb19833dd2..a3868a8330 100644
--- a/web/app/components/app-sidebar/__tests__/text-squeeze-fix-verification.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/text-squeeze-fix-verification.spec.tsx
@@ -7,7 +7,7 @@ import { render } from '@testing-library/react'
 import * as React from 'react'
 
 // Mock Next.js navigation
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegment: () => 'overview',
 }))
 
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx
index f8612e8057..2f98089e40 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { AppModeEnum } from '@/types/app'
 import AppInfoModals from '../app-info-modals'
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (loader: () => Promise<{ default: React.ComponentType }>) => {
     const LazyComp = React.lazy(loader)
     return function DynamicWrapper(props: Record<string, unknown>) {
diff --git a/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts b/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
index 6104e2b641..deea28ce3e 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
+++ b/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
@@ -23,7 +23,7 @@ let mockAppDetail: Record<string, unknown> | undefined = {
   icon_background: '#FFEAD5',
 }
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ replace: mockReplace }),
 }))
 
diff --git a/web/app/components/app-sidebar/app-info/app-info-modals.tsx b/web/app/components/app-sidebar/app-info/app-info-modals.tsx
index 4ca7f6adbc..232afb18c7 100644
--- a/web/app/components/app-sidebar/app-info/app-info-modals.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-modals.tsx
@@ -3,9 +3,9 @@ import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-moda
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import type { App, AppSSO } from '@/types/app'
-import dynamic from 'next/dynamic'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import dynamic from '@/next/dynamic'
 
 const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), { ssr: false })
 const CreateAppModal = dynamic(() => import('@/app/components/explore/create-app-modal'), { ssr: false })
diff --git a/web/app/components/app-sidebar/app-info/use-app-info-actions.ts b/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
index 800f21de44..55ec13e506 100644
--- a/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
+++ b/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
@@ -1,7 +1,6 @@
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import { useRouter } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -9,6 +8,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast/context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
+import { useRouter } from '@/next/navigation'
 import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
 import { useInvalidateAppList } from '@/service/use-apps'
 import { fetchWorkflowDraft } from '@/service/workflow'
diff --git a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
index 512f9490c2..1df6fa79b7 100644
--- a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
+++ b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
@@ -80,7 +80,7 @@ const createDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
   ...overrides,
 })
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ replace: mockReplace }),
 }))
 
diff --git a/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx b/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx
index be27e247d7..a1e275d731 100644
--- a/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx
+++ b/web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx
@@ -90,7 +90,7 @@ const createDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
   ...overrides,
 })
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: mockReplace,
   }),
diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index 96127c4210..528bac831f 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -1,11 +1,11 @@
 import type { DataSet } from '@/models/datasets'
 import { RiMoreFill } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import { useRouter } from '@/next/navigation'
 import { checkIsUsedInApp, deleteDataset } from '@/service/datasets'
 import { datasetDetailQueryKeyPrefix, useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import { useInvalid } from '@/service/use-base'
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index e24b005d01..13fde97f89 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -1,12 +1,12 @@
 import type { NavIcon } from './nav-link'
 import { useHover, useKeyPress } from 'ahooks'
-import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { usePathname } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 import Divider from '../base/divider'
 import { getKeyboardKeyCodeBySystem } from '../workflow/utils'
diff --git a/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx b/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
index 04ca7bd0e4..fe46290002 100644
--- a/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
+++ b/web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
@@ -4,12 +4,12 @@ import * as React from 'react'
 import NavLink from '..'
 
 // Mock Next.js navigation
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegment: () => 'overview',
 }))
 
 // Mock Next.js Link component
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: function MockLink({ children, href, className, title }: { children: React.ReactNode, href: string, className?: string, title?: string }) {
     return (
       <a href={href} className={className} title={title} data-testid="nav-link">
diff --git a/web/app/components/app-sidebar/nav-link/index.tsx b/web/app/components/app-sidebar/nav-link/index.tsx
index d69ed8590e..cf986a7407 100644
--- a/web/app/components/app-sidebar/nav-link/index.tsx
+++ b/web/app/components/app-sidebar/nav-link/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { RemixiconComponentType } from '@remixicon/react'
-import Link from 'next/link'
-import { useSelectedLayoutSegment } from 'next/navigation'
 import * as React from 'react'
+import Link from '@/next/link'
+import { useSelectedLayoutSegment } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 
 export type NavIcon = React.ComponentType<
diff --git a/web/app/components/app/configuration/dataset-config/context-var/index.spec.tsx b/web/app/components/app/configuration/dataset-config/context-var/index.spec.tsx
index 7f71247d56..8c6e626b45 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/index.spec.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import ContextVar from './index'
 
 // Mock external dependencies only
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/test',
 }))
diff --git a/web/app/components/app/configuration/dataset-config/context-var/var-picker.spec.tsx b/web/app/components/app/configuration/dataset-config/context-var/var-picker.spec.tsx
index aa8dae813f..6704fa0afd 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/var-picker.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/var-picker.spec.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import VarPicker from './var-picker'
 
 // Mock external dependencies only
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/test',
 }))
diff --git a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
index 330223f974..2a90058bd3 100644
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
 import { useInfiniteScroll } from 'ahooks'
-import Link from 'next/link'
 import * as React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -14,6 +13,7 @@ import Modal from '@/app/components/base/modal'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import FeatureIcon from '@/app/components/header/account-setting/model-provider-page/model-selector/feature-icon'
 import { useKnowledge } from '@/hooks/use-knowledge'
+import Link from '@/next/link'
 import { useInfiniteDatasets } from '@/service/knowledge/use-dataset'
 import { cn } from '@/utils/classnames'
 
@@ -126,7 +126,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
 
       {hasNoData && (
         <div
-          className="mt-6 flex h-[128px] items-center justify-center space-x-1  rounded-lg border text-[13px]"
+          className="mt-6 flex h-[128px] items-center justify-center space-x-1 rounded-lg border text-[13px]"
           style={{
             background: 'rgba(0, 0, 0, 0.02)',
             borderColor: 'rgba(0, 0, 0, 0.02',
@@ -195,7 +195,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
       )}
       {!isLoading && (
         <div className="mt-8 flex items-center justify-between">
-          <div className="text-sm  font-medium text-text-secondary">
+          <div className="text-sm font-medium text-text-secondary">
             {selected.length > 0 && `${selected.length} ${t('feature.dataSet.selected', { ns: 'appDebug' })}`}
           </div>
           <div className="flex space-x-2">
diff --git a/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx b/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
index 48141d0045..a75516a43f 100644
--- a/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
@@ -155,7 +155,7 @@ vi.mock('@/service/debug', () => ({
   stopChatMessageResponding: mockStopChatMessageResponding,
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/test',
   useParams: () => ({}),
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index a39eb3c63e..aa1bbe0a16 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -23,7 +23,6 @@ import { useBoolean, useGetState } from 'ahooks'
 import { clone } from 'es-toolkit/object'
 import { isEqual } from 'es-toolkit/predicate'
 import { produce } from 'immer'
-import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -72,6 +71,7 @@ import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { PromptMode } from '@/models/debug'
+import { usePathname } from '@/next/navigation'
 import { fetchAppDetailDirect, updateAppModelConfig } from '@/service/apps'
 import { fetchDatasets } from '@/service/datasets'
 import { fetchCollectionList } from '@/service/tools'
@@ -966,10 +966,10 @@ const Configuration: FC = () => {
               <div className="bg-default-subtle absolute left-0 top-0 h-14 w-full">
                 <div className="flex h-14 items-center justify-between px-6">
                   <div className="flex items-center">
-                    <div className="system-xl-semibold text-text-primary">{t('orchestrate', { ns: 'appDebug' })}</div>
+                    <div className="text-text-primary system-xl-semibold">{t('orchestrate', { ns: 'appDebug' })}</div>
                     <div className="flex h-[14px] items-center space-x-1 text-xs">
                       {isAdvancedMode && (
-                        <div className="system-xs-medium-uppercase ml-1 flex h-5 items-center rounded-md border border-components-button-secondary-border px-1.5 uppercase text-text-tertiary">{t('promptMode.advanced', { ns: 'appDebug' })}</div>
+                        <div className="ml-1 flex h-5 items-center rounded-md border border-components-button-secondary-border px-1.5 uppercase text-text-tertiary system-xs-medium-uppercase">{t('promptMode.advanced', { ns: 'appDebug' })}</div>
                       )}
                     </div>
                   </div>
@@ -1030,8 +1030,8 @@ const Configuration: FC = () => {
                 <Config />
               </div>
               {!isMobile && (
-                <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto " style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
-                  <div className="flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg ">
+                <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto" style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
+                  <div className="flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg">
                     <Debug
                       isAPIKeySet={isAPIKeySet}
                       onSetting={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}
diff --git a/web/app/components/app/create-app-dialog/app-list/index.spec.tsx b/web/app/components/app/create-app-dialog/app-list/index.spec.tsx
index e0f459ee75..e2db3a94f7 100644
--- a/web/app/components/app/create-app-dialog/app-list/index.spec.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/index.spec.tsx
@@ -62,7 +62,7 @@ vi.mock('@/app/components/workflow/plugin-dependency/hooks', () => ({
 vi.mock('@/utils/app-redirection', () => ({
   getRedirection: vi.fn(),
 }))
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
 }))
 
diff --git a/web/app/components/app/create-app-dialog/app-list/index.tsx b/web/app/components/app/create-app-dialog/app-list/index.tsx
index b967ba7d55..9cdcd58126 100644
--- a/web/app/components/app/create-app-dialog/app-list/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/index.tsx
@@ -4,7 +4,6 @@ import type { CreateAppModalProps } from '@/app/components/explore/create-app-mo
 import type { App } from '@/models/explore'
 import { RiRobot2Line } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -19,6 +18,7 @@ import { usePluginDependencies } from '@/app/components/workflow/plugin-dependen
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { DSLImportMode } from '@/models/app'
+import { useRouter } from '@/next/navigation'
 import { importDSL } from '@/service/apps'
 import { fetchAppDetail } from '@/service/explore'
 import { useExploreAppList } from '@/service/use-explore'
@@ -165,7 +165,7 @@ const Apps = ({
     <div className="flex h-full flex-col">
       <div className="flex items-center justify-between border-b border-divider-burn py-3">
         <div className="min-w-[180px] pl-5">
-          <span className="title-xl-semi-bold text-text-primary">{t('newApp.startFromTemplate', { ns: 'app' })}</span>
+          <span className="text-text-primary title-xl-semi-bold">{t('newApp.startFromTemplate', { ns: 'app' })}</span>
         </div>
         <div className="flex max-w-[548px] flex-1 items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1.5 shadow-md">
           <AppTypeSelector value={currentType} onChange={setCurrentType} />
@@ -195,10 +195,10 @@ const Apps = ({
             <>
               <div className="pb-1 pt-4">
                 {searchKeywords
-                  ? <p className="title-md-semi-bold text-text-tertiary">{searchFilteredList.length > 1 ? t('newApp.foundResults', { ns: 'app', count: searchFilteredList.length }) : t('newApp.foundResult', { ns: 'app', count: searchFilteredList.length })}</p>
+                  ? <p className="text-text-tertiary title-md-semi-bold">{searchFilteredList.length > 1 ? t('newApp.foundResults', { ns: 'app', count: searchFilteredList.length }) : t('newApp.foundResult', { ns: 'app', count: searchFilteredList.length })}</p>
                   : (
                       <div className="flex h-[22px] items-center">
-                        <AppCategoryLabel category={currCategory as AppCategories} className="title-md-semi-bold text-text-primary" />
+                        <AppCategoryLabel category={currCategory as AppCategories} className="text-text-primary title-md-semi-bold" />
                       </div>
                     )}
               </div>
@@ -250,8 +250,8 @@ function NoTemplateFound() {
       <div className="mb-2 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-components-card-bg shadow-lg">
         <RiRobot2Line className="h-5 w-5 text-text-tertiary" />
       </div>
-      <p className="title-md-semi-bold text-text-primary">{t('newApp.noTemplateFound', { ns: 'app' })}</p>
-      <p className="system-sm-regular text-text-tertiary">{t('newApp.noTemplateFoundTip', { ns: 'app' })}</p>
+      <p className="text-text-primary title-md-semi-bold">{t('newApp.noTemplateFound', { ns: 'app' })}</p>
+      <p className="text-text-tertiary system-sm-regular">{t('newApp.noTemplateFoundTip', { ns: 'app' })}</p>
     </div>
   )
 }
diff --git a/web/app/components/app/create-app-modal/index.spec.tsx b/web/app/components/app/create-app-modal/index.spec.tsx
index a9adb17582..c253fcd457 100644
--- a/web/app/components/app/create-app-modal/index.spec.tsx
+++ b/web/app/components/app/create-app-modal/index.spec.tsx
@@ -1,13 +1,13 @@
 import type { App } from '@/types/app'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { useRouter } from 'next/navigation'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { trackEvent } from '@/app/components/base/amplitude'
-
 import { ToastContext } from '@/app/components/base/toast/context'
+
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
+import { useRouter } from '@/next/navigation'
 import { createApp } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
@@ -23,7 +23,7 @@ vi.mock('ahooks', () => ({
   useKeyPress: vi.fn(),
   useHover: () => false,
 }))
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(),
 }))
 vi.mock('@/app/components/base/amplitude', () => ({
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index 16ca4bdaff..e6e758a3d3 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -4,8 +4,6 @@ import type { AppIconSelection } from '../../base/app-icon-picker'
 import { RiArrowRightLine, RiArrowRightSLine, RiExchange2Fill } from '@remixicon/react'
 
 import { useDebounceFn, useKeyPress } from 'ahooks'
-import Image from 'next/image'
-import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -23,6 +21,8 @@ import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import useTheme from '@/hooks/use-theme'
+import Image from '@/next/image'
+import { useRouter } from '@/next/navigation'
 import { createApp } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
@@ -117,10 +117,10 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
           <div className="px-10">
             <div className="h-6 w-full 2xl:h-[139px]" />
             <div className="pb-6 pt-1">
-              <span className="title-2xl-semi-bold text-text-primary">{t('newApp.startFromBlank', { ns: 'app' })}</span>
+              <span className="text-text-primary title-2xl-semi-bold">{t('newApp.startFromBlank', { ns: 'app' })}</span>
             </div>
             <div className="mb-2 leading-6">
-              <span className="system-sm-semibold text-text-secondary">{t('newApp.chooseAppType', { ns: 'app' })}</span>
+              <span className="text-text-secondary system-sm-semibold">{t('newApp.chooseAppType', { ns: 'app' })}</span>
             </div>
             <div className="flex w-[660px] flex-col gap-4">
               <div>
@@ -160,7 +160,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                     className="flex cursor-pointer items-center border-0 bg-transparent p-0"
                     onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)}
                   >
-                    <span className="system-2xs-medium-uppercase text-text-tertiary">{t('newApp.forBeginners', { ns: 'app' })}</span>
+                    <span className="text-text-tertiary system-2xs-medium-uppercase">{t('newApp.forBeginners', { ns: 'app' })}</span>
                     <RiArrowRightSLine className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} />
                   </button>
                 </div>
@@ -212,7 +212,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               <div className="flex items-center space-x-3">
                 <div className="flex-1">
                   <div className="mb-1 flex h-6 items-center">
-                    <label className="system-sm-semibold text-text-secondary">{t('newApp.captionName', { ns: 'app' })}</label>
+                    <label className="text-text-secondary system-sm-semibold">{t('newApp.captionName', { ns: 'app' })}</label>
                   </div>
                   <Input
                     value={name}
@@ -243,8 +243,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               </div>
               <div>
                 <div className="mb-1 flex h-6 items-center">
-                  <label className="system-sm-semibold text-text-secondary">{t('newApp.captionDescription', { ns: 'app' })}</label>
-                  <span className="system-xs-regular ml-1 text-text-tertiary">
+                  <label className="text-text-secondary system-sm-semibold">{t('newApp.captionDescription', { ns: 'app' })}</label>
+                  <span className="ml-1 text-text-tertiary system-xs-regular">
                     (
                     {t('newApp.optional', { ns: 'app' })}
                     )
@@ -260,7 +260,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
             </div>
             {isAppsFull && <AppsFull className="mt-4" loc="app-create" />}
             <div className="flex items-center justify-between pb-10 pt-5">
-              <div className="system-xs-regular flex cursor-pointer items-center gap-1 text-text-tertiary" onClick={onCreateFromTemplate}>
+              <div className="flex cursor-pointer items-center gap-1 text-text-tertiary system-xs-regular" onClick={onCreateFromTemplate}>
                 <span>{t('newApp.noIdeaTip', { ns: 'app' })}</span>
                 <div className="p-[1px]">
                   <RiArrowRightLine className="h-3.5 w-3.5" />
@@ -334,8 +334,8 @@ function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardP
       onClick={onClick}
     >
       {icon}
-      <div className="system-sm-semibold mb-0.5 mt-2 text-text-secondary">{title}</div>
-      <div className="system-xs-regular line-clamp-2 text-text-tertiary" title={description}>{description}</div>
+      <div className="mb-0.5 mt-2 text-text-secondary system-sm-semibold">{title}</div>
+      <div className="line-clamp-2 text-text-tertiary system-xs-regular" title={description}>{description}</div>
     </div>
   )
 }
@@ -367,8 +367,8 @@ function AppPreview({ mode }: { mode: AppModeEnum }) {
   const previewInfo = modeToPreviewInfoMap[mode]
   return (
     <div className="px-8 py-4">
-      <h4 className="system-sm-semibold-uppercase text-text-secondary">{previewInfo.title}</h4>
-      <div className="system-xs-regular mt-1 min-h-8 max-w-96 text-text-tertiary">
+      <h4 className="text-text-secondary system-sm-semibold-uppercase">{previewInfo.title}</h4>
+      <div className="mt-1 min-h-8 max-w-96 text-text-tertiary system-xs-regular">
         <span>{previewInfo.description}</span>
       </div>
     </div>
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index a542ef059f..eaaee50973 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -4,7 +4,6 @@ import type { MouseEventHandler } from 'react'
 import { RiCloseLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
-import { useRouter } from 'next/navigation'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -22,6 +21,7 @@ import {
   DSLImportMode,
   DSLImportStatus,
 } from '@/models/app'
+import { useRouter } from '@/next/navigation'
 import {
   importDSL,
   importDSLConfirm,
@@ -232,7 +232,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         isShow={show}
         onClose={noop}
       >
-        <div className="title-2xl-semi-bold flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary">
+        <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary title-2xl-semi-bold">
           {t('importFromDSL', { ns: 'app' })}
           <div
             className="flex h-8 w-8 cursor-pointer items-center"
@@ -241,7 +241,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             <RiCloseLine className="h-5 w-5 text-text-tertiary" />
           </div>
         </div>
-        <div className="system-md-semibold flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary">
+        <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary system-md-semibold">
           {
             tabs.map(tab => (
               <div
@@ -275,7 +275,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           {
             currentTab === CreateFromDSLModalTab.FROM_URL && (
               <div>
-                <div className="system-md-semibold mb-1 text-text-secondary">DSL URL</div>
+                <div className="mb-1 text-text-secondary system-md-semibold">DSL URL</div>
                 <Input
                   placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
                   value={dslUrlValue}
@@ -309,8 +309,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         className="w-[480px]"
       >
         <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-          <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-          <div className="system-md-regular flex grow flex-col text-text-secondary">
+          <div className="text-text-primary title-2xl-semi-bold">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
+          <div className="flex grow flex-col text-text-secondary system-md-regular">
             <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
             <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
             <br />
diff --git a/web/app/components/app/log-annotation/index.spec.tsx b/web/app/components/app/log-annotation/index.spec.tsx
index c7c654e870..de33ae6f66 100644
--- a/web/app/components/app/log-annotation/index.spec.tsx
+++ b/web/app/components/app/log-annotation/index.spec.tsx
@@ -7,7 +7,7 @@ import { AppModeEnum } from '@/types/app'
 import LogAnnotation from './index'
 
 const mockRouterPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
   }),
diff --git a/web/app/components/app/log-annotation/index.tsx b/web/app/components/app/log-annotation/index.tsx
index ca6182603d..c5c21289df 100644
--- a/web/app/components/app/log-annotation/index.tsx
+++ b/web/app/components/app/log-annotation/index.tsx
@@ -1,6 +1,5 @@
 'use client'
 import type { FC } from 'react'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,6 +10,7 @@ import WorkflowLog from '@/app/components/app/workflow-log'
 import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
 import Loading from '@/app/components/base/loading'
 import TabSlider from '@/app/components/base/tab-slider-plain'
+import { useRouter } from '@/next/navigation'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'
 
diff --git a/web/app/components/app/log/empty-element.tsx b/web/app/components/app/log/empty-element.tsx
index e42a1df7d5..c400d3a772 100644
--- a/web/app/components/app/log/empty-element.tsx
+++ b/web/app/components/app/log/empty-element.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC, SVGProps } from 'react'
 import type { App } from '@/types/app'
-import Link from 'next/link'
 import * as React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 import { AppModeEnum } from '@/types/app'
 import { getRedirectionPath } from '@/utils/app-redirection'
 import { basePath } from '@/utils/var'
@@ -28,11 +28,11 @@ const EmptyElement: FC<{ appDetail: App }> = ({ appDetail }) => {
   return (
     <div className="flex h-full items-center justify-center">
       <div className="box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4">
-        <span className="system-md-semibold text-text-secondary">
+        <span className="text-text-secondary system-md-semibold">
           {t('table.empty.element.title', { ns: 'appLog' })}
           <ThreeDotsIcon className="relative -left-1.5 -top-3 inline text-text-secondary" />
         </span>
-        <div className="system-sm-regular mt-2 text-text-tertiary">
+        <div className="mt-2 text-text-tertiary system-sm-regular">
           <Trans
             i18nKey="table.empty.element.content"
             ns="appLog"
diff --git a/web/app/components/app/log/index.tsx b/web/app/components/app/log/index.tsx
index e96c9ce0c9..53ae971394 100644
--- a/web/app/components/app/log/index.tsx
+++ b/web/app/components/app/log/index.tsx
@@ -4,13 +4,13 @@ import type { App } from '@/types/app'
 import { useDebounce } from 'ahooks'
 import dayjs from 'dayjs'
 import { omit } from 'es-toolkit/object'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import Pagination from '@/app/components/base/pagination'
 import { APP_PAGE_LIMIT } from '@/config'
+import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
 import { useChatConversations, useCompletionConversations } from '@/service/use-log'
 import { AppModeEnum } from '@/types/app'
 import EmptyElement from './empty-element'
@@ -118,7 +118,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
 
   return (
     <div className="flex h-full grow flex-col">
-      <p className="system-sm-regular shrink-0 text-text-tertiary">{t('description', { ns: 'appLog' })}</p>
+      <p className="shrink-0 text-text-tertiary system-sm-regular">{t('description', { ns: 'appLog' })}</p>
       <div className="flex max-h-[calc(100%-16px)] flex-1 grow flex-col py-4">
         <Filter isChatMode={isChatMode} appId={appDetail.id} queryParams={queryParams} setQueryParams={handleQueryParamsChange} />
         {total === undefined
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 4eb733a02c..453c7c9d4c 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -14,7 +14,6 @@ import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
 import { get } from 'es-toolkit/compat'
 import { noop } from 'es-toolkit/function'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -38,6 +37,7 @@ import { WorkflowContextProvider } from '@/app/components/workflow/context'
 import { useAppContext } from '@/context/app-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useTimestamp from '@/hooks/use-timestamp'
+import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
 import { fetchChatMessages, updateLogMessageAnnotations, updateLogMessageFeedbacks } from '@/service/log'
 import { AppSourceType } from '@/service/share'
 import { useChatConversationDetail, useCompletionConversationDetail } from '@/service/use-log'
@@ -96,7 +96,7 @@ const statusTdRender = (statusCount: StatusCount) => {
 
   if (statusCount.paused > 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="yellow" />
         <span className="text-util-colors-warning-warning-600">Pending</span>
       </div>
@@ -104,7 +104,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else if (statusCount.partial_success + statusCount.failed === 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="green" />
         <span className="text-util-colors-green-green-600">Success</span>
       </div>
@@ -112,7 +112,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else if (statusCount.failed === 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="green" />
         <span className="text-util-colors-green-green-600">Partial Success</span>
       </div>
@@ -120,7 +120,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="red" />
         <span className="text-util-colors-red-red-600">
           {statusCount.failed}
@@ -562,9 +562,9 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
       {/* Panel Header */}
       <div className="flex shrink-0 items-center gap-2 rounded-t-xl bg-components-panel-bg pb-2 pl-4 pr-3 pt-3">
         <div className="shrink-0">
-          <div className="system-xs-semibold-uppercase mb-0.5 text-text-primary">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
+          <div className="mb-0.5 text-text-primary system-xs-semibold-uppercase">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
           {isChatMode && (
-            <div className="system-2xs-regular-uppercase flex items-center text-text-secondary">
+            <div className="flex items-center text-text-secondary system-2xs-regular-uppercase">
               <Tooltip
                 popupContent={detail.id}
               >
@@ -574,7 +574,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
             </div>
           )}
           {!isChatMode && (
-            <div className="system-2xs-regular-uppercase text-text-secondary">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
+            <div className="text-text-secondary system-2xs-regular-uppercase">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
           )}
         </div>
         <div className="flex grow flex-wrap items-center justify-end gap-y-1">
@@ -600,7 +600,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
           ? (
               <div className="px-6 py-4">
                 <div className="flex h-[18px] items-center space-x-3">
-                  <div className="system-xs-semibold-uppercase text-text-tertiary">{t('table.header.output', { ns: 'appLog' })}</div>
+                  <div className="text-text-tertiary system-xs-semibold-uppercase">{t('table.header.output', { ns: 'appLog' })}</div>
                   <div
                     className="h-px grow"
                     style={{
@@ -692,7 +692,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
               </div>
               {hasMore && (
                 <div className="py-3 text-center">
-                  <div className="system-xs-regular text-text-tertiary">
+                  <div className="text-text-tertiary system-xs-regular">
                     {t('detail.loading', { ns: 'appLog' })}
                     ...
                   </div>
@@ -950,7 +950,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
         )}
         popupClassName={(isHighlight && !isChatMode) ? '' : '!hidden'}
       >
-        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'system-sm-regular overflow-hidden text-ellipsis whitespace-nowrap')}>
+        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'overflow-hidden text-ellipsis whitespace-nowrap system-sm-regular')}>
           {value || '-'}
         </div>
       </Tooltip>
@@ -963,7 +963,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
   return (
     <div className="relative mt-2 grow overflow-x-auto">
       <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
-        <thead className="system-xs-medium-uppercase text-text-tertiary">
+        <thead className="text-text-tertiary system-xs-medium-uppercase">
           <tr>
             <td className="w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1"></td>
             <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{isChatMode ? t('table.header.summary', { ns: 'appLog' }) : t('table.header.input', { ns: 'appLog' })}</td>
@@ -976,7 +976,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
             <td className="whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3">{t('table.header.time', { ns: 'appLog' })}</td>
           </tr>
         </thead>
-        <tbody className="system-sm-regular text-text-secondary">
+        <tbody className="text-text-secondary system-sm-regular">
           {logs.data.map((log: any) => {
             const endUser = log.from_end_user_session_id || log.from_account_name
             const leftValue = get(log, isChatMode ? 'name' : 'message.inputs.query') || (!isChatMode ? (get(log, 'message.query') || get(log, 'message.inputs.default_input')) : '') || ''
diff --git a/web/app/components/app/overview/app-card.tsx b/web/app/components/app/overview/app-card.tsx
index 1b02e54d5f..8e5cabdfe1 100644
--- a/web/app/components/app/overview/app-card.tsx
+++ b/web/app/components/app/overview/app-card.tsx
@@ -14,7 +14,6 @@ import {
   RiVerifiedBadgeLine,
   RiWindowLine,
 } from '@remixicon/react'
-import { usePathname, useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -34,6 +33,7 @@ import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useDocLink } from '@/context/i18n'
 import { AccessMode } from '@/models/access-control'
+import { usePathname, useRouter } from '@/next/navigation'
 import { useAppWhiteListSubjects } from '@/service/access-control'
 import { fetchAppDetailDirect } from '@/service/apps'
 import { useAppWorkflow } from '@/service/use-workflow'
@@ -266,7 +266,7 @@ function AppCard({
           </div>
           {!isMinimalState && (
             <div className="flex flex-col items-start justify-center self-stretch">
-              <div className="system-xs-medium pb-1 text-text-tertiary">
+              <div className="pb-1 text-text-tertiary system-xs-medium">
                 {isApp
                   ? t('overview.appInfo.accessibleAddress', { ns: 'appOverview' })
                   : t('overview.apiInfo.accessibleAddress', { ns: 'appOverview' })}
@@ -319,9 +319,9 @@ function AppCard({
           )}
           {!isMinimalState && isApp && systemFeatures.webapp_auth.enabled && appDetail && (
             <div className="flex flex-col items-start justify-center self-stretch">
-              <div className="system-xs-medium pb-1 text-text-tertiary">{t('publishApp.title', { ns: 'app' })}</div>
+              <div className="pb-1 text-text-tertiary system-xs-medium">{t('publishApp.title', { ns: 'app' })}</div>
               <div
-                className="flex h-9 w-full cursor-pointer items-center gap-x-0.5  rounded-lg bg-components-input-bg-normal py-1 pl-2.5 pr-2"
+                className="flex h-9 w-full cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal py-1 pl-2.5 pr-2"
                 onClick={handleClickAccessControl}
               >
                 <div className="flex grow items-center gap-x-1.5 pr-1">
@@ -329,32 +329,32 @@ function AppCard({
                     && (
                       <>
                         <RiBuildingLine className="h-4 w-4 shrink-0 text-text-secondary" />
-                        <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.organization', { ns: 'app' })}</p>
+                        <p className="text-text-secondary system-sm-medium">{t('accessControlDialog.accessItems.organization', { ns: 'app' })}</p>
                       </>
                     )}
                   {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS
                     && (
                       <>
                         <RiLockLine className="h-4 w-4 shrink-0 text-text-secondary" />
-                        <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
+                        <p className="text-text-secondary system-sm-medium">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
                       </>
                     )}
                   {appDetail?.access_mode === AccessMode.PUBLIC
                     && (
                       <>
                         <RiGlobalLine className="h-4 w-4 shrink-0 text-text-secondary" />
-                        <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.anyone', { ns: 'app' })}</p>
+                        <p className="text-text-secondary system-sm-medium">{t('accessControlDialog.accessItems.anyone', { ns: 'app' })}</p>
                       </>
                     )}
                   {appDetail?.access_mode === AccessMode.EXTERNAL_MEMBERS
                     && (
                       <>
                         <RiVerifiedBadgeLine className="h-4 w-4 shrink-0 text-text-secondary" />
-                        <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.external', { ns: 'app' })}</p>
+                        <p className="text-text-secondary system-sm-medium">{t('accessControlDialog.accessItems.external', { ns: 'app' })}</p>
                       </>
                     )}
                 </div>
-                {!isAppAccessSet && <p className="system-xs-regular shrink-0 text-text-tertiary">{t('publishApp.notSet', { ns: 'app' })}</p>}
+                {!isAppAccessSet && <p className="shrink-0 text-text-tertiary system-xs-regular">{t('publishApp.notSet', { ns: 'app' })}</p>}
                 <div className="flex h-4 w-4 shrink-0 items-center justify-center">
                   <RiArrowRightSLine className="h-4 w-4 text-text-quaternary" />
                 </div>
@@ -389,7 +389,7 @@ function AppCard({
                   >
                     <div className="flex items-center justify-center gap-[1px]">
                       <op.opIcon className="h-3.5 w-3.5" />
-                      <div className={`${(runningStatus || !disabled) ? 'text-text-tertiary' : 'text-components-button-ghost-text-disabled'} system-xs-medium px-[3px]`}>{op.opName}</div>
+                      <div className={`${(runningStatus || !disabled) ? 'text-text-tertiary' : 'text-components-button-ghost-text-disabled'} px-[3px] system-xs-medium`}>{op.opName}</div>
                     </div>
                   </Tooltip>
                 </Button>
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index f7c9e309ab..13dacde424 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -4,7 +4,6 @@ import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppIconType, AppSSO, Language } from '@/types/app'
 import { RiArrowRightSLine, RiCloseLine } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@@ -26,6 +25,7 @@ import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/con
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { languages } from '@/i18n-config/language'
+import Link from '@/next/link'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'
 
diff --git a/web/app/components/app/overview/trigger-card.tsx b/web/app/components/app/overview/trigger-card.tsx
index 1f0f0dca56..e83a7ce575 100644
--- a/web/app/components/app/overview/trigger-card.tsx
+++ b/web/app/components/app/overview/trigger-card.tsx
@@ -3,7 +3,6 @@ import type { AppDetailResponse } from '@/models/app'
 import type { AppTrigger } from '@/service/use-tools'
 import type { AppSSO } from '@/types/app'
 import type { I18nKeysByPrefix } from '@/types/i18n'
-import Link from 'next/link'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
@@ -13,6 +12,7 @@ import { useTriggerStatusStore } from '@/app/components/workflow/store/trigger-s
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useAppContext } from '@/context/app-context'
 import { useDocLink } from '@/context/i18n'
+import Link from '@/next/link'
 import {
 
   useAppTriggers,
@@ -161,7 +161,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
                 <TriggerAll className="h-4 w-4 text-text-primary-on-surface" />
               </div>
               <div className="group w-full">
-                <div className="system-md-semibold min-w-0 overflow-hidden text-ellipsis break-normal text-text-secondary group-hover:text-text-primary">
+                <div className="min-w-0 overflow-hidden text-ellipsis break-normal text-text-secondary system-md-semibold group-hover:text-text-primary">
                   {triggerCount > 0
                     ? t('overview.triggerInfo.triggersAdded', { ns: 'appOverview', count: triggerCount })
                     : t('overview.triggerInfo.noTriggerAdded', { ns: 'appOverview' })}
@@ -179,12 +179,12 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
                   <div className="shrink-0">
                     {getTriggerIcon(trigger, triggerPlugins || [])}
                   </div>
-                  <div className="system-sm-medium min-w-0 flex-1 truncate text-text-secondary">
+                  <div className="min-w-0 flex-1 truncate text-text-secondary system-sm-medium">
                     {trigger.title}
                   </div>
                 </div>
                 <div className="flex shrink-0 items-center">
-                  <div className={`${trigger.status === 'enabled' ? 'text-text-success' : 'text-text-warning'} system-xs-semibold-uppercase whitespace-nowrap`}>
+                  <div className={`${trigger.status === 'enabled' ? 'text-text-success' : 'text-text-warning'} whitespace-nowrap system-xs-semibold-uppercase`}>
                     {trigger.status === 'enabled'
                       ? t('overview.status.running', { ns: 'appOverview' })
                       : t('overview.status.disable', { ns: 'appOverview' })}
@@ -204,7 +204,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
 
         {triggerCount === 0 && (
           <div className="p-3">
-            <div className="system-xs-regular leading-4 text-text-tertiary">
+            <div className="leading-4 text-text-tertiary system-xs-regular">
               {t('overview.triggerInfo.triggerStatusDescription', { ns: 'appOverview' })}
               {' '}
               <Link
diff --git a/web/app/components/app/switch-app-modal/index.spec.tsx b/web/app/components/app/switch-app-modal/index.spec.tsx
index c905d79b31..53007b986b 100644
--- a/web/app/components/app/switch-app-modal/index.spec.tsx
+++ b/web/app/components/app/switch-app-modal/index.spec.tsx
@@ -11,7 +11,7 @@ import SwitchAppModal from './index'
 
 const mockPush = vi.fn()
 const mockReplace = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
     replace: mockReplace,
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index 8caa07c187..7c3269d52c 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -3,7 +3,6 @@
 import type { App } from '@/types/app'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -20,6 +19,7 @@ import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
+import { useRouter } from '@/next/navigation'
 import { deleteApp, switchApp } from '@/service/apps'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index 22358805a7..85ef1003b2 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -16,7 +16,6 @@ import {
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import copy from 'copy-to-clipboard'
-import { useParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -30,6 +29,7 @@ import Loading from '@/app/components/base/loading'
 import { Markdown } from '@/app/components/base/markdown'
 import NewAudioButton from '@/app/components/base/new-audio-button'
 import Toast from '@/app/components/base/toast'
+import { useParams } from '@/next/navigation'
 import { fetchTextGenerationMessage } from '@/service/debug'
 import { AppSourceType, fetchMoreLikeThis, submitHumanInputForm, updateFeedback } from '@/service/share'
 import { submitHumanInputForm as submitHumanInputFormService } from '@/service/workflow'
@@ -244,7 +244,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                   )}
                   >
                     {taskId && (
-                      <div className={cn('system-2xs-medium-uppercase mb-2 flex items-center text-text-accent-secondary', isError && 'text-text-destructive')}>
+                      <div className={cn('mb-2 flex items-center text-text-accent-secondary system-2xs-medium-uppercase', isError && 'text-text-destructive')}>
                         <RiPlayList2Line className="mr-1 h-3 w-3" />
                         <span>{t('generation.execution', { ns: 'share' })}</span>
                         <span className="px-1">·</span>
@@ -264,7 +264,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                       <div className="flex items-center space-x-6 px-1">
                         <div
                           className={cn(
-                            'system-sm-semibold-uppercase cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
+                            'cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary system-sm-semibold-uppercase',
                             currentTab === 'RESULT' && 'border-util-colors-blue-brand-blue-brand-600 text-text-primary',
                           )}
                           onClick={() => switchTab('RESULT')}
@@ -273,7 +273,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                         </div>
                         <div
                           className={cn(
-                            'system-sm-semibold-uppercase cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
+                            'cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary system-sm-semibold-uppercase',
                             currentTab === 'DETAIL' && 'border-util-colors-blue-brand-blue-brand-600 text-text-primary',
                           )}
                           onClick={() => switchTab('DETAIL')}
@@ -306,7 +306,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                 </>
               )}
               {!workflowProcessData && taskId && (
-                <div className={cn('system-2xs-medium-uppercase sticky left-0 top-0 flex w-full items-center rounded-t-2xl bg-components-actionbar-bg p-4 pb-3 text-text-accent-secondary', isError && 'text-text-destructive')}>
+                <div className={cn('sticky left-0 top-0 flex w-full items-center rounded-t-2xl bg-components-actionbar-bg p-4 pb-3 text-text-accent-secondary system-2xs-medium-uppercase', isError && 'text-text-destructive')}>
                   <RiPlayList2Line className="mr-1 h-3 w-3" />
                   <span>{t('generation.execution', { ns: 'share' })}</span>
                   <span className="px-1">·</span>
@@ -314,7 +314,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                 </div>
               )}
               {isError && (
-                <div className="body-lg-regular p-4 pt-0 text-text-quaternary">{t('generation.batchFailed.outputPlaceholder', { ns: 'share' })}</div>
+                <div className="p-4 pt-0 text-text-quaternary body-lg-regular">{t('generation.batchFailed.outputPlaceholder', { ns: 'share' })}</div>
               )}
               {!workflowProcessData && !isError && (typeof content === 'string') && (
                 <div className={cn('p-4', taskId && 'pt-0')}>
@@ -324,7 +324,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
             </div>
             {/* meta data */}
             <div className={cn(
-              'system-xs-regular relative mt-1 h-4 px-4 text-text-quaternary',
+              'relative mt-1 h-4 px-4 text-text-quaternary system-xs-regular',
               isMobile && ((childMessageId || isQuerying) && depth < 3) && 'pl-10',
             )}
             >
diff --git a/web/app/components/app/text-generate/saved-items/index.spec.tsx b/web/app/components/app/text-generate/saved-items/index.spec.tsx
index f04a37bded..b45a1cca6c 100644
--- a/web/app/components/app/text-generate/saved-items/index.spec.tsx
+++ b/web/app/components/app/text-generate/saved-items/index.spec.tsx
@@ -10,7 +10,7 @@ import SavedItems from './index'
 vi.mock('copy-to-clipboard', () => ({
   default: vi.fn(),
 }))
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({}),
   usePathname: () => '/',
 }))
diff --git a/web/app/components/app/workflow-log/detail.spec.tsx b/web/app/components/app/workflow-log/detail.spec.tsx
index 1ed7193d42..806c6e71b2 100644
--- a/web/app/components/app/workflow-log/detail.spec.tsx
+++ b/web/app/components/app/workflow-log/detail.spec.tsx
@@ -19,7 +19,7 @@ import DetailPanel from './detail'
 // ============================================================================
 
 const mockRouterPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
   }),
diff --git a/web/app/components/app/workflow-log/detail.tsx b/web/app/components/app/workflow-log/detail.tsx
index ce85653e71..d1beaa168f 100644
--- a/web/app/components/app/workflow-log/detail.tsx
+++ b/web/app/components/app/workflow-log/detail.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import { RiCloseLine, RiPlayLargeLine } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/app/store'
 import TooltipPlus from '@/app/components/base/tooltip'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'
 import Run from '@/app/components/workflow/run'
+import { useRouter } from '@/next/navigation'
 
 type ILogDetail = {
   runID: string
@@ -31,7 +31,7 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose, canReplay = false }) => {
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </span>
       <div className="flex items-center bg-components-panel-bg">
-        <h1 className="system-xl-semibold shrink-0 px-4 py-1 text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
+        <h1 className="shrink-0 px-4 py-1 text-text-primary system-xl-semibold">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
         {canReplay && (
           <TooltipPlus
             popupContent={t('runDetail.testWithParams', { ns: 'appLog' })}
diff --git a/web/app/components/app/workflow-log/index.spec.tsx b/web/app/components/app/workflow-log/index.spec.tsx
index f8e3f16e25..92f8eddf83 100644
--- a/web/app/components/app/workflow-log/index.spec.tsx
+++ b/web/app/components/app/workflow-log/index.spec.tsx
@@ -47,13 +47,13 @@ vi.mock('ahooks', () => ({
   },
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: vi.fn(),
   }),
 }))
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href }: { children: React.ReactNode, href: string }) => <a href={href}>{children}</a>,
 }))
 
diff --git a/web/app/components/app/workflow-log/list.spec.tsx b/web/app/components/app/workflow-log/list.spec.tsx
index 760d222692..36cc911248 100644
--- a/web/app/components/app/workflow-log/list.spec.tsx
+++ b/web/app/components/app/workflow-log/list.spec.tsx
@@ -23,7 +23,7 @@ import WorkflowAppLogList from './list'
 // ============================================================================
 
 const mockRouterPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
   }),
diff --git a/web/app/components/apps/__tests__/app-card.spec.tsx b/web/app/components/apps/__tests__/app-card.spec.tsx
index 9bc23ce199..c87b22a3e8 100644
--- a/web/app/components/apps/__tests__/app-card.spec.tsx
+++ b/web/app/components/apps/__tests__/app-card.spec.tsx
@@ -11,7 +11,7 @@ import AppCard from '../app-card'
 
 // Mock next/navigation
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
   }),
@@ -111,7 +111,7 @@ vi.mock('@/utils/time', () => ({
 }))
 
 // Mock dynamic imports
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (importFn: () => Promise<unknown>) => {
     const fnString = importFn.toString()
 
diff --git a/web/app/components/apps/__tests__/list.spec.tsx b/web/app/components/apps/__tests__/list.spec.tsx
index 989bf6a788..877c392e6d 100644
--- a/web/app/components/apps/__tests__/list.spec.tsx
+++ b/web/app/components/apps/__tests__/list.spec.tsx
@@ -8,7 +8,7 @@ import List from '../list'
 
 const mockReplace = vi.fn()
 const mockRouter = { replace: mockReplace }
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => mockRouter,
   useSearchParams: () => new URLSearchParams(''),
 }))
@@ -124,7 +124,7 @@ vi.mock('@/hooks/use-pay', () => ({
   CheckModal: () => null,
 }))
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (importFn: () => Promise<unknown>) => {
     const fnString = importFn.toString()
 
diff --git a/web/app/components/apps/__tests__/new-app-card.spec.tsx b/web/app/components/apps/__tests__/new-app-card.spec.tsx
index f4c357b9f9..9c98936bea 100644
--- a/web/app/components/apps/__tests__/new-app-card.spec.tsx
+++ b/web/app/components/apps/__tests__/new-app-card.spec.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 import CreateAppCard from '../new-app-card'
 
 const mockReplace = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: mockReplace,
   }),
@@ -18,7 +18,7 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (importFn: () => Promise<{ default: React.ComponentType }>) => {
     const fnString = importFn.toString()
 
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index 471b3420d1..31a3be05cd 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -7,8 +7,6 @@ import type { CreateAppModalProps } from '@/app/components/explore/create-app-mo
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import type { App } from '@/types/app'
 import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
-import dynamic from 'next/dynamic'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -36,6 +34,8 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { AccessMode } from '@/models/access-control'
+import dynamic from '@/next/dynamic'
+import { useRouter } from '@/next/navigation'
 import { useGetUserCanAccessApp } from '@/service/access-control'
 import { copyApp, exportAppConfig, updateAppInfo } from '@/service/apps'
 import { fetchInstalledAppList } from '@/service/explore'
diff --git a/web/app/components/apps/footer.tsx b/web/app/components/apps/footer.tsx
index 3a0e960e0d..b5ba6b314b 100644
--- a/web/app/components/apps/footer.tsx
+++ b/web/app/components/apps/footer.tsx
@@ -1,7 +1,7 @@
 import { RiDiscordFill, RiDiscussLine, RiGithubFill } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 
 type CustomLinkProps = {
   href: string
@@ -30,7 +30,7 @@ const Footer = () => {
   return (
     <footer className="relative shrink-0 grow-0 px-12 py-2">
       <h3 className="text-gradient text-xl font-semibold leading-tight">{t('join', { ns: 'app' })}</h3>
-      <p className="system-sm-regular mt-1 text-text-tertiary">{t('communityIntro', { ns: 'app' })}</p>
+      <p className="mt-1 text-text-tertiary system-sm-regular">{t('communityIntro', { ns: 'app' })}</p>
       <div className="mt-3 flex items-center gap-2">
         <CustomLink href="https://github.com/langgenius/dify">
           <RiGithubFill className="h-5 w-5 text-text-tertiary" />
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 6ae422f716..0d52bd468c 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -2,7 +2,6 @@
 
 import type { FC } from 'react'
 import { useDebounceFn } from 'ahooks'
-import dynamic from 'next/dynamic'
 import { parseAsStringLiteral, useQueryState } from 'nuqs'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -15,6 +14,7 @@ import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { CheckModal } from '@/hooks/use-pay'
+import dynamic from '@/next/dynamic'
 import { useInfiniteAppList } from '@/service/use-apps'
 import { AppModeEnum, AppModes } from '@/types/app'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/apps/new-app-card.tsx b/web/app/components/apps/new-app-card.tsx
index 868da0dcb5..7741190b8c 100644
--- a/web/app/components/apps/new-app-card.tsx
+++ b/web/app/components/apps/new-app-card.tsx
@@ -1,10 +1,5 @@
 'use client'
 
-import dynamic from 'next/dynamic'
-import {
-  useRouter,
-  useSearchParams,
-} from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,6 +8,11 @@ import { CreateFromDSLModalTab } from '@/app/components/app/create-from-dsl-moda
 import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
 import AppListContext from '@/context/app-list-context'
 import { useProviderContext } from '@/context/provider-context'
+import dynamic from '@/next/dynamic'
+import {
+  useRouter,
+  useSearchParams,
+} from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 
 const CreateAppModal = dynamic(() => import('@/app/components/app/create-app-modal'), {
diff --git a/web/app/components/base/audio-btn/__tests__/index.spec.tsx b/web/app/components/base/audio-btn/__tests__/index.spec.tsx
index c8d8ee851b..8f6c26d12b 100644
--- a/web/app/components/base/audio-btn/__tests__/index.spec.tsx
+++ b/web/app/components/base/audio-btn/__tests__/index.spec.tsx
@@ -1,14 +1,14 @@
 import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import i18next from 'i18next'
-import { useParams, usePathname } from 'next/navigation'
+import { useParams, usePathname } from '@/next/navigation'
 import AudioBtn from '../index'
 
 const mockPlayAudio = vi.fn()
 const mockPauseAudio = vi.fn()
 const mockGetAudioPlayer = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: vi.fn(),
   usePathname: vi.fn(),
 }))
diff --git a/web/app/components/base/audio-btn/index.tsx b/web/app/components/base/audio-btn/index.tsx
index 8bea3193c8..47fefe19e5 100644
--- a/web/app/components/base/audio-btn/index.tsx
+++ b/web/app/components/base/audio-btn/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import { t } from 'i18next'
-import { useParams, usePathname } from 'next/navigation'
 import { useState } from 'react'
 import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
 import Loading from '@/app/components/base/loading'
 import Tooltip from '@/app/components/base/tooltip'
+import { useParams, usePathname } from '@/next/navigation'
 import s from './style.module.css'
 
 type AudioBtnProps = {
diff --git a/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx b/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx
index 60a5da5d49..bd5f01bcda 100644
--- a/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx
@@ -25,7 +25,7 @@ vi.mock('../context', () => ({
   useChatWithHistoryContext: vi.fn(),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(() => ({
     push: vi.fn(),
     replace: vi.fn(),
diff --git a/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx b/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
index 84bf9134d6..d75f9897a7 100644
--- a/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
@@ -22,7 +22,7 @@ vi.mock('../context', () => ({
   ChatWithHistoryContext: { Provider: ({ children }: { children: React.ReactNode }) => <div>{children}</div> },
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(() => ({
     push: vi.fn(),
     replace: vi.fn(),
diff --git a/web/app/components/base/chat/chat-with-history/__tests__/index.spec.tsx b/web/app/components/base/chat/chat-with-history/__tests__/index.spec.tsx
index 167cc7b385..e306569140 100644
--- a/web/app/components/base/chat/chat-with-history/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/__tests__/index.spec.tsx
@@ -26,7 +26,7 @@ vi.mock('@/hooks/use-document-title', () => ({
   default: vi.fn(),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(() => ({
     push: vi.fn(),
     replace: vi.fn(),
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
index 896161f66c..bb62869f21 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
@@ -87,7 +87,7 @@ vi.mock('@/context/global-public-context', () => ({
 }))
 
 // Mock next/navigation
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/test',
 }))
diff --git a/web/app/components/base/chat/chat/__tests__/content-switch.spec.tsx b/web/app/components/base/chat/chat/__tests__/content-switch.spec.tsx
index e05151464a..31c3459242 100644
--- a/web/app/components/base/chat/chat/__tests__/content-switch.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/content-switch.spec.tsx
@@ -38,7 +38,7 @@ describe('ContentSwitch', () => {
     expect(switchSibling).toHaveBeenCalledWith('prev')
   })
 
-  it('calls switchSibling with "next" when right button is clicked', async () => {
+  it('calls switchSibling with "@/next" when right button is clicked', async () => {
     const user = userEvent.setup()
     const switchSibling = vi.fn()
     render(<ContentSwitch {...defaultProps} switchSibling={switchSibling} />)
@@ -46,7 +46,7 @@ describe('ContentSwitch', () => {
     const nextButton = screen.getByRole('button', { name: /next/i })
     await user.click(nextButton)
 
-    expect(switchSibling).toHaveBeenCalledWith('next')
+    expect(switchSibling).toHaveBeenCalledWith('@/next')
   })
 
   it('applies disabled styles and prevents clicks when prevDisabled is true', async () => {
diff --git a/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx b/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx
index da989d8b7c..f5b261d5f3 100644
--- a/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx
@@ -1,8 +1,8 @@
 import type { ChatConfig, ChatItemInTree } from '../../types'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import { act, renderHook } from '@testing-library/react'
-import { useParams, usePathname } from 'next/navigation'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { useParams, usePathname } from '@/next/navigation'
 import { sseGet, ssePost } from '@/service/base'
 import { useChat } from '../hooks'
 
@@ -28,7 +28,7 @@ vi.mock('@/hooks/use-timestamp', () => ({
   default: () => ({ formatTime: vi.fn().mockReturnValue('10:00 AM') }),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: vi.fn(() => ({})),
   usePathname: vi.fn(() => ''),
   useRouter: vi.fn(() => ({})),
diff --git a/web/app/components/base/chat/chat/__tests__/question.spec.tsx b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
index e9392adb8a..ab4dd5c5e0 100644
--- a/web/app/components/base/chat/chat/__tests__/question.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
@@ -18,7 +18,7 @@ vi.mock('../content-switch', () => ({
   default: ({ count, currentIndex, switchSibling, prevDisabled, nextDisabled }: {
     count?: number
     currentIndex?: number
-    switchSibling: (direction: 'prev' | 'next') => void
+    switchSibling: (direction: 'prev' | '@/next') => void
     prevDisabled: boolean
     nextDisabled: boolean
   }) => {
@@ -38,7 +38,7 @@ vi.mock('../content-switch', () => ({
         <button
           type="button"
           aria-label="Next"
-          onClick={() => switchSibling('next')}
+          onClick={() => switchSibling('@/next')}
           disabled={nextDisabled}
         >
           Next
@@ -915,7 +915,7 @@ describe('Question component', () => {
 
   it('should handle missing switchSibling prop', async () => {
     const user = userEvent.setup()
-    const item = makeItem({ prevSibling: 'prev', nextSibling: 'next', siblingIndex: 1, siblingCount: 3 })
+    const item = makeItem({ prevSibling: 'prev', nextSibling: '@/next', siblingIndex: 1, siblingCount: 3 })
     renderWithProvider(item, vi.fn() as unknown as OnRegenerate, { switchSibling: undefined })
 
     const prevBtn = screen.getByRole('button', { name: /previous/i })
diff --git a/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx b/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
index baff417669..836397a586 100644
--- a/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
+++ b/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
@@ -111,7 +111,7 @@ vi.mock('@/app/components/base/chat/chat/log', () => ({
   default: () => <button data-testid="log-btn"><div className="i-ri-file-list-3-line" /></button>,
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: vi.fn(() => ({ appId: 'test-app' })),
   usePathname: vi.fn(() => '/apps/test-app'),
 }))
diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx
index fb3e94ed00..bbb9c44058 100644
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@@ -127,7 +127,7 @@ const Answer: FC<AnswerProps> = ({
     }
   }, [])
 
-  const handleSwitchSibling = useCallback((direction: 'prev' | 'next') => {
+  const handleSwitchSibling = useCallback((direction: 'prev' | '@/next') => {
     if (direction === 'prev') {
       if (item.prevSibling)
         switchSibling?.(item.prevSibling)
diff --git a/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx b/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
index cb1d0f2a55..f628b7de82 100644
--- a/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
@@ -208,7 +208,7 @@ vi.mock('../../check-input-forms-hooks', () => ({
 // ---------------------------------------------------------------------------
 // Next.js navigation
 // ---------------------------------------------------------------------------
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ token: 'test-token' }),
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/test',
diff --git a/web/app/components/base/chat/chat/citation/popup.tsx b/web/app/components/base/chat/chat/citation/popup.tsx
index 7dc2baeb88..3a1d4bf251 100644
--- a/web/app/components/base/chat/chat/citation/popup.tsx
+++ b/web/app/components/base/chat/chat/citation/popup.tsx
@@ -1,6 +1,5 @@
 import type { FC, MouseEvent } from 'react'
 import type { Resources } from './index'
-import Link from 'next/link'
 import { Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import FileIcon from '@/app/components/base/file-icon'
@@ -9,6 +8,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import Link from '@/next/link'
 import { useDocumentDownload } from '@/service/knowledge/use-document'
 import { downloadUrl } from '@/utils/download'
 import ProgressTooltip from './progress-tooltip'
diff --git a/web/app/components/base/chat/chat/content-switch.tsx b/web/app/components/base/chat/chat/content-switch.tsx
index ee735c61fd..fddabda1c7 100644
--- a/web/app/components/base/chat/chat/content-switch.tsx
+++ b/web/app/components/base/chat/chat/content-switch.tsx
@@ -11,7 +11,7 @@ export default function ContentSwitch({
   currentIndex?: number
   prevDisabled: boolean
   nextDisabled: boolean
-  switchSibling: (direction: 'prev' | 'next') => void
+  switchSibling: (direction: 'prev' | '@/next') => void
 }) {
   return (
     count && count > 1 && currentIndex !== undefined && (
@@ -36,7 +36,7 @@ export default function ContentSwitch({
           aria-label="Next" // Added for accessibility and testing
           className={`${nextDisabled ? 'opacity-30' : 'opacity-100'}`}
           disabled={nextDisabled}
-          onClick={() => !nextDisabled && switchSibling('next')}
+          onClick={() => !nextDisabled && switchSibling('@/next')}
         >
           <ChevronRight className="h-[14px] w-[14px] text-text-primary" />
         </button>
diff --git a/web/app/components/base/chat/chat/hooks.ts b/web/app/components/base/chat/chat/hooks.ts
index 307fd52443..9c06f49b3d 100644
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
@@ -15,7 +15,6 @@ import type {
 import { uniqBy } from 'es-toolkit/compat'
 import { noop } from 'es-toolkit/function'
 import { produce, setAutoFreeze } from 'immer'
-import { useParams, usePathname } from 'next/navigation'
 import {
   useCallback,
   useEffect,
@@ -33,6 +32,7 @@ import {
 import { useToastContext } from '@/app/components/base/toast/context'
 import { NodeRunningStatus, WorkflowRunningStatus } from '@/app/components/workflow/types'
 import useTimestamp from '@/hooks/use-timestamp'
+import { useParams, usePathname } from '@/next/navigation'
 import {
   sseGet,
   ssePost,
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index 1af54bcf1e..297f6decd6 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -121,7 +121,7 @@ const Question: FC<QuestionProps> = ({
     }, 50)
   }, [clearCompositionEndTimer])
 
-  const handleSwitchSibling = useCallback((direction: 'prev' | 'next') => {
+  const handleSwitchSibling = useCallback((direction: 'prev' | '@/next') => {
     if (direction === 'prev') {
       if (item.prevSibling)
         switchSibling?.(item.prevSibling)
diff --git a/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx b/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
index e135356d4f..c9a34723e6 100644
--- a/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
@@ -23,7 +23,7 @@ vi.mock('@/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropd
 }))
 
 // Mock next/image to render a normal img tag for testing
-vi.mock('next/image', () => ({
+vi.mock('@/next/image', () => ({
   __esModule: true,
   default: (props: ImgHTMLAttributes<HTMLImageElement> & { unoptimized?: boolean }) => {
     const { unoptimized: _, ...rest } = props
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
index aad2d3d09b..689a9e0439 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
@@ -9,7 +9,7 @@ vi.mock('../../context', () => ({
   useEmbeddedChatbotContext: vi.fn(),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ token: 'test-token' }),
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/',
diff --git a/web/app/components/base/checkbox-list/__tests__/index.spec.tsx b/web/app/components/base/checkbox-list/__tests__/index.spec.tsx
index 7c588f6a33..f205352604 100644
--- a/web/app/components/base/checkbox-list/__tests__/index.spec.tsx
+++ b/web/app/components/base/checkbox-list/__tests__/index.spec.tsx
@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import CheckboxList from '..'
 
-vi.mock('next/image', () => ({
+vi.mock('@/next/image', () => ({
   default: (props: ImgHTMLAttributes<HTMLImageElement>) => <img {...props} />,
 }))
 
diff --git a/web/app/components/base/checkbox-list/index.tsx b/web/app/components/base/checkbox-list/index.tsx
index ed328244a1..7a23cc9034 100644
--- a/web/app/components/base/checkbox-list/index.tsx
+++ b/web/app/components/base/checkbox-list/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
-import Image from 'next/image'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import Checkbox from '@/app/components/base/checkbox'
 import SearchInput from '@/app/components/base/search-input'
 import SearchMenu from '@/assets/search-menu.svg'
+import Image from '@/next/image'
 import { cn } from '@/utils/classnames'
 import Button from '../button'
 
diff --git a/web/app/components/base/encrypted-bottom/index.tsx b/web/app/components/base/encrypted-bottom/index.tsx
index 5a9bc9b488..885cb28bbd 100644
--- a/web/app/components/base/encrypted-bottom/index.tsx
+++ b/web/app/components/base/encrypted-bottom/index.tsx
@@ -1,7 +1,7 @@
 import type { I18nKeysWithPrefix } from '@/types/i18n'
 import { RiLock2Fill } from '@remixicon/react'
-import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
 
 type EncryptedKey = I18nKeysWithPrefix<'common', 'provider.encrypted.'>
@@ -20,7 +20,7 @@ export const EncryptedBottom = (props: Props) => {
   const { frontTextKey = DEFAULT_FRONT_KEY, backTextKey = DEFAULT_BACK_KEY, className } = props
 
   return (
-    <div className={cn('system-xs-regular flex items-center justify-center rounded-b-2xl border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary', className)}>
+    <div className={cn('flex items-center justify-center rounded-b-2xl border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary system-xs-regular', className)}>
       <RiLock2Fill className="mx-1 h-3 w-3 text-text-quaternary" />
       {t(frontTextKey, { ns: 'common' })}
       <Link
diff --git a/web/app/components/base/features/new-feature-panel/__tests__/index.spec.tsx b/web/app/components/base/features/new-feature-panel/__tests__/index.spec.tsx
index 20632c4954..77f9a0253b 100644
--- a/web/app/components/base/features/new-feature-panel/__tests__/index.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/__tests__/index.spec.tsx
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react'
 import { FeaturesProvider } from '../../context'
 import NewFeaturePanel from '../index'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/app/test-app-id/configuration',
 }))
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/index.spec.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/index.spec.tsx
index f2ddc5482d..03ddbc6322 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/index.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/index.spec.tsx
@@ -7,7 +7,7 @@ import AnnotationReply from '../index'
 const originalConsoleError = console.error
 const mockPush = vi.fn()
 let mockPathname = '/app/test-app-id/configuration'
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mockPush }),
   usePathname: () => mockPathname,
 }))
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
index df8982407c..1ad4ef613e 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
@@ -2,7 +2,6 @@ import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import type { AnnotationReplyConfig } from '@/models/debug'
 import { RiEqualizer2Line, RiExternalLinkLine } from '@remixicon/react'
 import { produce } from 'immer'
-import { usePathname, useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -14,6 +13,7 @@ import FeatureCard from '@/app/components/base/features/new-feature-panel/featur
 import { MessageFast } from '@/app/components/base/icons/src/vender/features'
 import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { ANNOTATION_DEFAULT } from '@/config'
+import { usePathname, useRouter } from '@/next/navigation'
 
 type Props = {
   disabled?: boolean
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx
index 66d870f28f..535d40e00a 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx
@@ -22,7 +22,7 @@ const mockUseAppVoices = vi.fn((_appId: string, _language?: string) => ({
   data: mockVoiceItems,
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: () => mockPathname,
   useParams: () => ({}),
 }))
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/voice-settings.spec.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/voice-settings.spec.tsx
index 658d5f500b..f77802c133 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/voice-settings.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/voice-settings.spec.tsx
@@ -35,7 +35,7 @@ vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
   PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: () => '/app/test-app-id/configuration',
   useParams: () => ({ appId: 'test-app-id' }),
 }))
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index 11db9346ff..d4e008c4e6 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -3,7 +3,6 @@ import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import type { Item } from '@/app/components/base/select'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
 import { produce } from 'immer'
-import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,6 +12,7 @@ import { useFeatures, useFeaturesStore } from '@/app/components/base/features/ho
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { languages } from '@/i18n-config/language'
+import { usePathname } from '@/next/navigation'
 import { useAppVoices } from '@/service/use-apps'
 import { TtsAutoPlay } from '@/types/app'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/base/file-thumb/__tests__/index.spec.tsx b/web/app/components/base/file-thumb/__tests__/index.spec.tsx
index 368f14ae75..7d929159c0 100644
--- a/web/app/components/base/file-thumb/__tests__/index.spec.tsx
+++ b/web/app/components/base/file-thumb/__tests__/index.spec.tsx
@@ -4,7 +4,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import FileThumb from '../index'
 
-vi.mock('next/image', () => ({
+vi.mock('@/next/image', () => ({
   __esModule: true,
   default: (props: ImgHTMLAttributes<HTMLImageElement>) => <img {...props} />,
 }))
diff --git a/web/app/components/base/file-uploader/__tests__/hooks.spec.ts b/web/app/components/base/file-uploader/__tests__/hooks.spec.ts
index 8343974967..824a3b7a03 100644
--- a/web/app/components/base/file-uploader/__tests__/hooks.spec.ts
+++ b/web/app/components/base/file-uploader/__tests__/hooks.spec.ts
@@ -6,7 +6,7 @@ import { useFile, useFileSizeLimit } from '../hooks'
 
 const mockNotify = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ token: undefined }),
 }))
 
diff --git a/web/app/components/base/file-uploader/dynamic-pdf-preview.spec.tsx b/web/app/components/base/file-uploader/dynamic-pdf-preview.spec.tsx
index 1f15c419eb..54d75bcaac 100644
--- a/web/app/components/base/file-uploader/dynamic-pdf-preview.spec.tsx
+++ b/web/app/components/base/file-uploader/dynamic-pdf-preview.spec.tsx
@@ -40,7 +40,7 @@ const mockPdfPreview = vi.hoisted(() =>
   vi.fn(() => null),
 )
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: mockDynamic,
 }))
 
diff --git a/web/app/components/base/file-uploader/dynamic-pdf-preview.tsx b/web/app/components/base/file-uploader/dynamic-pdf-preview.tsx
index 116db89864..225d5664c2 100644
--- a/web/app/components/base/file-uploader/dynamic-pdf-preview.tsx
+++ b/web/app/components/base/file-uploader/dynamic-pdf-preview.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import dynamic from 'next/dynamic'
+import dynamic from '@/next/dynamic'
 
 type DynamicPdfPreviewProps = {
   url: string
diff --git a/web/app/components/base/file-uploader/hooks.ts b/web/app/components/base/file-uploader/hooks.ts
index 4aab60175c..27345b22ff 100644
--- a/web/app/components/base/file-uploader/hooks.ts
+++ b/web/app/components/base/file-uploader/hooks.ts
@@ -4,7 +4,6 @@ import type { FileUpload } from '@/app/components/base/features/types'
 import type { FileUploadConfigResponse } from '@/models/common'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
-import { useParams } from 'next/navigation'
 import {
   useCallback,
   useState,
@@ -20,6 +19,7 @@ import {
 } from '@/app/components/base/file-uploader/constants'
 import { useToastContext } from '@/app/components/base/toast/context'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import { useParams } from '@/next/navigation'
 import { uploadRemoteFileInfo } from '@/service/common'
 import { TransferMethod } from '@/types/app'
 import { formatFileSize } from '@/utils/format'
diff --git a/web/app/components/base/form/components/field/__tests__/file-uploader.spec.tsx b/web/app/components/base/form/components/field/__tests__/file-uploader.spec.tsx
index dee7c97222..bff8e9cbf9 100644
--- a/web/app/components/base/form/components/field/__tests__/file-uploader.spec.tsx
+++ b/web/app/components/base/form/components/field/__tests__/file-uploader.spec.tsx
@@ -27,7 +27,7 @@ vi.mock('../../..', () => ({
   useFieldContext: () => mockField,
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ token: 'test-token' }),
 }))
 
diff --git a/web/app/components/base/form/form-scenarios/base/__tests__/field.spec.tsx b/web/app/components/base/form/form-scenarios/base/__tests__/field.spec.tsx
index 7de473e4c8..de82f2b37e 100644
--- a/web/app/components/base/form/form-scenarios/base/__tests__/field.spec.tsx
+++ b/web/app/components/base/form/form-scenarios/base/__tests__/field.spec.tsx
@@ -6,7 +6,7 @@ import { useAppForm } from '../../..'
 import BaseField from '../field'
 import { BaseFieldType } from '../types'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({}),
 }))
 
diff --git a/web/app/components/base/ga/__tests__/index.spec.tsx b/web/app/components/base/ga/__tests__/index.spec.tsx
index ee7f7a2a9d..619c4514dc 100644
--- a/web/app/components/base/ga/__tests__/index.spec.tsx
+++ b/web/app/components/base/ga/__tests__/index.spec.tsx
@@ -31,11 +31,11 @@ vi.mock('@/config', () => ({
   },
 }))
 
-vi.mock('next/headers', () => ({
+vi.mock('@/next/headers', () => ({
   headers: mockHeaders,
 }))
 
-vi.mock('next/script', () => ({
+vi.mock('@/next/script', () => ({
   default: ({
     id,
     strategy,
diff --git a/web/app/components/base/ga/index.tsx b/web/app/components/base/ga/index.tsx
index 7225dcf428..3e19afd974 100644
--- a/web/app/components/base/ga/index.tsx
+++ b/web/app/components/base/ga/index.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
-import { headers } from 'next/headers'
-import Script from 'next/script'
 import * as React from 'react'
 import { IS_CE_EDITION, IS_PROD } from '@/config'
+import { headers } from '@/next/headers'
+import Script from '@/next/script'
 
 export enum GaType {
   admin = 'admin',
diff --git a/web/app/components/base/image-uploader/__tests__/hooks.spec.ts b/web/app/components/base/image-uploader/__tests__/hooks.spec.ts
index f79ea98081..e4295dfb09 100644
--- a/web/app/components/base/image-uploader/__tests__/hooks.spec.ts
+++ b/web/app/components/base/image-uploader/__tests__/hooks.spec.ts
@@ -9,7 +9,7 @@ vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ token: undefined }),
 }))
 
diff --git a/web/app/components/base/image-uploader/hooks.ts b/web/app/components/base/image-uploader/hooks.ts
index 03cf0feeca..9251d3888f 100644
--- a/web/app/components/base/image-uploader/hooks.ts
+++ b/web/app/components/base/image-uploader/hooks.ts
@@ -1,9 +1,9 @@
 import type { ClipboardEvent } from 'react'
 import type { ImageFile, VisionSettings } from '@/types/app'
-import { useParams } from 'next/navigation'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useToastContext } from '@/app/components/base/toast/context'
+import { useParams } from '@/next/navigation'
 import { ALLOW_FILE_EXTENSIONS, TransferMethod } from '@/types/app'
 import { getImageUploadErrorMessage, imageUpload } from './utils'
 
diff --git a/web/app/components/base/linked-apps-panel/__tests__/index.spec.tsx b/web/app/components/base/linked-apps-panel/__tests__/index.spec.tsx
index 27408531c4..5576fb289e 100644
--- a/web/app/components/base/linked-apps-panel/__tests__/index.spec.tsx
+++ b/web/app/components/base/linked-apps-panel/__tests__/index.spec.tsx
@@ -4,7 +4,7 @@ import { vi } from 'vitest'
 import { AppModeEnum } from '@/types/app'
 import LinkedAppsPanel from '../index'
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, className }: { children: React.ReactNode, href: string, className: string }) => (
     <a href={href} className={className} data-testid="link-item">
       {children}
diff --git a/web/app/components/base/linked-apps-panel/index.tsx b/web/app/components/base/linked-apps-panel/index.tsx
index adc8ccf729..16476af1df 100644
--- a/web/app/components/base/linked-apps-panel/index.tsx
+++ b/web/app/components/base/linked-apps-panel/index.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import type { RelatedApp } from '@/models/datasets'
 import { RiArrowRightUpLine } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import AppIcon from '@/app/components/base/app-icon'
+import Link from '@/next/link'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'
 
@@ -32,9 +32,9 @@ const LikedItem = ({
         <div className={cn('relative h-6 w-6 rounded-md')}>
           <AppIcon size="tiny" iconType={detail.icon_type} icon={detail.icon} background={detail.icon_background} imageUrl={detail.icon_url} />
         </div>
-        {!isMobile && <div className={cn(' system-sm-medium ml-2 truncate text-text-primary')}>{detail?.name || '--'}</div>}
+        {!isMobile && <div className={cn('ml-2 truncate text-text-primary system-sm-medium')}>{detail?.name || '--'}</div>}
       </div>
-      <div className="system-2xs-medium-uppercase shrink-0 text-text-tertiary group-hover/link-item:hidden">{appTypeMap[detail.mode]}</div>
+      <div className="shrink-0 text-text-tertiary system-2xs-medium-uppercase group-hover/link-item:hidden">{appTypeMap[detail.mode]}</div>
       <RiArrowRightUpLine className="hidden h-4 w-4 text-text-tertiary group-hover/link-item:block" />
     </Link>
   )
diff --git a/web/app/components/base/markdown-blocks/code-block.tsx b/web/app/components/base/markdown-blocks/code-block.tsx
index 837929cfff..b36d8d7788 100644
--- a/web/app/components/base/markdown-blocks/code-block.tsx
+++ b/web/app/components/base/markdown-blocks/code-block.tsx
@@ -1,5 +1,4 @@
 import ReactEcharts from 'echarts-for-react'
-import dynamic from 'next/dynamic'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import {
@@ -12,6 +11,7 @@ import MarkdownMusic from '@/app/components/base/markdown-blocks/music'
 import ErrorBoundary from '@/app/components/base/markdown/error-boundary'
 import SVGBtn from '@/app/components/base/svg'
 import useTheme from '@/hooks/use-theme'
+import dynamic from '@/next/dynamic'
 import { Theme } from '@/types/app'
 import SVGRenderer from '../svg-gallery' // Assumes svg-gallery.tsx is in /base directory
 
diff --git a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.spec.tsx b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.spec.tsx
index 58eb24d75e..ca29421372 100644
--- a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.spec.tsx
+++ b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.spec.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import WithIconCardItem from './with-icon-card-item'
 
-vi.mock('next/image', () => ({
+vi.mock('@/next/image', () => ({
   default: ({ unoptimized: _unoptimized, ...props }: React.ImgHTMLAttributes<HTMLImageElement> & { unoptimized?: boolean }) => <img {...props} />,
 }))
 
diff --git a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx
index 915c31f160..803ed9899a 100644
--- a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx
+++ b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import type { WithIconCardItemProps } from './markdown-with-directive-schema'
-import Image from 'next/image'
+import Image from '@/next/image'
 import { cn } from '@/utils/classnames'
 
 type WithIconItemProps = WithIconCardItemProps & {
diff --git a/web/app/components/base/markdown-with-directive/index.spec.tsx b/web/app/components/base/markdown-with-directive/index.spec.tsx
index 0ca608727f..ec865a8ea4 100644
--- a/web/app/components/base/markdown-with-directive/index.spec.tsx
+++ b/web/app/components/base/markdown-with-directive/index.spec.tsx
@@ -7,7 +7,7 @@ import { MarkdownWithDirective } from './index'
 
 const FOUR_COLON_RE = /:{4}/
 
-vi.mock('next/image', () => ({
+vi.mock('@/next/image', () => ({
   default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...props} />,
 }))
 
diff --git a/web/app/components/base/markdown/__tests__/index.spec.tsx b/web/app/components/base/markdown/__tests__/index.spec.tsx
index 5d0261b074..08c4527003 100644
--- a/web/app/components/base/markdown/__tests__/index.spec.tsx
+++ b/web/app/components/base/markdown/__tests__/index.spec.tsx
@@ -7,7 +7,7 @@ const { mockReactMarkdownWrapper } = vi.hoisted(() => ({
   mockReactMarkdownWrapper: vi.fn(),
 }))
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: () => {
     const MockStreamdownWrapper = (props: { latexContent: string }) => {
       mockReactMarkdownWrapper(props)
diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx
index 6faee9c260..5915816d7a 100644
--- a/web/app/components/base/markdown/index.tsx
+++ b/web/app/components/base/markdown/index.tsx
@@ -1,7 +1,7 @@
 import type { SimplePluginInfo, StreamdownWrapperProps } from './streamdown-wrapper'
 import { flow } from 'es-toolkit/compat'
-import dynamic from 'next/dynamic'
 import { memo, useMemo } from 'react'
+import dynamic from '@/next/dynamic'
 import { cn } from '@/utils/classnames'
 import { preprocessLaTeX, preprocessThinkTag } from './markdown-utils'
 
diff --git a/web/app/components/base/markdown/streamdown-wrapper.tsx b/web/app/components/base/markdown/streamdown-wrapper.tsx
index 6fdf954edc..46db301adb 100644
--- a/web/app/components/base/markdown/streamdown-wrapper.tsx
+++ b/web/app/components/base/markdown/streamdown-wrapper.tsx
@@ -1,7 +1,6 @@
 import type { ComponentType } from 'react'
 import type { Components, StreamdownProps } from 'streamdown'
 import { createMathPlugin } from '@streamdown/math'
-import dynamic from 'next/dynamic'
 import { memo, useMemo } from 'react'
 import RemarkBreaks from 'remark-breaks'
 import { defaultRehypePlugins, defaultRemarkPlugins, Streamdown } from 'streamdown'
@@ -18,6 +17,7 @@ import {
   VideoBlock,
 } from '@/app/components/base/markdown-blocks'
 import { ENABLE_SINGLE_DOLLAR_LATEX } from '@/config'
+import dynamic from '@/next/dynamic'
 import { customUrlTransform } from './markdown-utils'
 import 'katex/dist/katex.min.css'
 
diff --git a/web/app/components/base/new-audio-button/__tests__/index.spec.tsx b/web/app/components/base/new-audio-button/__tests__/index.spec.tsx
index 64dd590012..23696fca74 100644
--- a/web/app/components/base/new-audio-button/__tests__/index.spec.tsx
+++ b/web/app/components/base/new-audio-button/__tests__/index.spec.tsx
@@ -1,15 +1,15 @@
 import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import i18next from 'i18next'
-import { useParams, usePathname } from 'next/navigation'
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useParams, usePathname } from '@/next/navigation'
 import AudioBtn from '../index'
 
 const mockPlayAudio = vi.fn()
 const mockPauseAudio = vi.fn()
 const mockGetAudioPlayer = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: vi.fn(),
   usePathname: vi.fn(),
 }))
diff --git a/web/app/components/base/new-audio-button/index.tsx b/web/app/components/base/new-audio-button/index.tsx
index 7e1e1ccc78..c6569ff958 100644
--- a/web/app/components/base/new-audio-button/index.tsx
+++ b/web/app/components/base/new-audio-button/index.tsx
@@ -3,11 +3,11 @@ import {
   RiVolumeUpLine,
 } from '@remixicon/react'
 import { t } from 'i18next'
-import { useParams, usePathname } from 'next/navigation'
 import { useState } from 'react'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
 import Tooltip from '@/app/components/base/tooltip'
+import { useParams, usePathname } from '@/next/navigation'
 
 type AudioBtnProps = {
   id?: string
diff --git a/web/app/components/base/prompt-editor/__tests__/utils.spec.ts b/web/app/components/base/prompt-editor/__tests__/utils.spec.ts
index 443f7a5d6d..cf6ed17c9b 100644
--- a/web/app/components/base/prompt-editor/__tests__/utils.spec.ts
+++ b/web/app/components/base/prompt-editor/__tests__/utils.spec.ts
@@ -252,7 +252,7 @@ describe('prompt-editor/utils', () => {
       const nextSibling = {
         __isTextNode: true,
         isTextEntity: vi.fn(() => true),
-        getTextContent: vi.fn(() => 'next'),
+        getTextContent: vi.fn(() => '@/next'),
         getFormat: vi.fn(() => 0),
         replace: vi.fn(),
       }
@@ -728,7 +728,7 @@ describe('prompt-editor/utils', () => {
       // Line 115: isTargetNode(nextSibling) === true → replaceWithSimpleText(nextSibling)
       class TargetNode {
         __isTextNode = true
-        getTextContent = vi.fn(() => 'next')
+        getTextContent = vi.fn(() => '@/next')
         getFormat = vi.fn(() => 0)
         replace = vi.fn()
         splitText = vi.fn()
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/pre-populate.spec.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/pre-populate.spec.tsx
index f5efc52c23..577deff703 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/pre-populate.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/pre-populate.spec.tsx
@@ -116,10 +116,10 @@ describe('PrePopulate', () => {
     )
 
     await user.clear(screen.getByRole('textbox'))
-    await user.type(screen.getByRole('textbox'), 'next')
+    await user.type(screen.getByRole('textbox'), '@/next')
     await user.click(screen.getByText('Use Variable Instead'))
 
-    expect(onValueChange).toHaveBeenLastCalledWith('next')
+    expect(onValueChange).toHaveBeenLastCalledWith('@/next')
     expect(onIsVariableChange).toHaveBeenCalledWith(true)
   })
 
diff --git a/web/app/components/base/ui/dropdown-menu/__tests__/index.spec.tsx b/web/app/components/base/ui/dropdown-menu/__tests__/index.spec.tsx
index c5fb532d98..b6772e5ad0 100644
--- a/web/app/components/base/ui/dropdown-menu/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/dropdown-menu/__tests__/index.spec.tsx
@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import { fireEvent, render, screen, within } from '@testing-library/react'
-import Link from 'next/link'
 import { describe, expect, it, vi } from 'vitest'
+import Link from '@/next/link'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,7 +14,7 @@ import {
   DropdownMenuTrigger,
 } from '../index'
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({
     href,
     children,
diff --git a/web/app/components/base/voice-input/__tests__/index.spec.tsx b/web/app/components/base/voice-input/__tests__/index.spec.tsx
index ac9c367e6a..e252c42f84 100644
--- a/web/app/components/base/voice-input/__tests__/index.spec.tsx
+++ b/web/app/components/base/voice-input/__tests__/index.spec.tsx
@@ -47,7 +47,7 @@ vi.mock('@/service/share', () => ({
   audioToText: vi.fn(),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: vi.fn(() => mockState.params),
   usePathname: vi.fn(() => mockState.pathname),
 }))
diff --git a/web/app/components/base/voice-input/index.tsx b/web/app/components/base/voice-input/index.tsx
index 8e26bbc895..9ae390a3ca 100644
--- a/web/app/components/base/voice-input/index.tsx
+++ b/web/app/components/base/voice-input/index.tsx
@@ -1,8 +1,8 @@
 import { useRafInterval } from 'ahooks'
 import Recorder from 'js-audio-recorder'
-import { useParams, usePathname } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useParams, usePathname } from '@/next/navigation'
 import { AppSourceType, audioToText } from '@/service/share'
 import { cn } from '@/utils/classnames'
 import s from './index.module.css'
diff --git a/web/app/components/base/zendesk/__tests__/index.spec.tsx b/web/app/components/base/zendesk/__tests__/index.spec.tsx
index 4ab84a0088..e928b1437b 100644
--- a/web/app/components/base/zendesk/__tests__/index.spec.tsx
+++ b/web/app/components/base/zendesk/__tests__/index.spec.tsx
@@ -26,7 +26,7 @@ vi.mock('@/config', () => ({
 }))
 
 // Mock next/headers
-vi.mock('next/headers', () => ({
+vi.mock('@/next/headers', () => ({
   headers: vi.fn(() => ({
     get: vi.fn((name: string) => {
       if (name === 'x-nonce')
@@ -44,7 +44,7 @@ type ScriptProps = {
   'nonce'?: string
   'data-testid'?: string
 }
-vi.mock('next/script', () => ({
+vi.mock('@/next/script', () => ({
   __esModule: true,
   default: vi.fn(({ children, id, src, nonce, 'data-testid': testId }: ScriptProps) => (
     <div data-testid={testId} id={id} data-src={src} data-nonce={nonce}>
diff --git a/web/app/components/base/zendesk/index.tsx b/web/app/components/base/zendesk/index.tsx
index 4879725c85..20f4f84baf 100644
--- a/web/app/components/base/zendesk/index.tsx
+++ b/web/app/components/base/zendesk/index.tsx
@@ -1,7 +1,7 @@
-import { headers } from 'next/headers'
-import Script from 'next/script'
 import { memo } from 'react'
 import { IS_CE_EDITION, IS_PROD, ZENDESK_WIDGET_KEY } from '@/config'
+import { headers } from '@/next/headers'
+import Script from '@/next/script'
 
 const Zendesk = async () => {
   if (IS_CE_EDITION || !ZENDESK_WIDGET_KEY)
diff --git a/web/app/components/billing/partner-stack/__tests__/use-ps-info.spec.tsx b/web/app/components/billing/partner-stack/__tests__/use-ps-info.spec.tsx
index ec79d18d29..2ea5db840f 100644
--- a/web/app/components/billing/partner-stack/__tests__/use-ps-info.spec.tsx
+++ b/web/app/components/billing/partner-stack/__tests__/use-ps-info.spec.tsx
@@ -48,7 +48,7 @@ vi.mock('js-cookie', () => {
     remove,
   }
 })
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSearchParams: () => ({
     get: (key: string) => searchParamsValues[key] ?? null,
   }),
diff --git a/web/app/components/billing/partner-stack/use-ps-info.ts b/web/app/components/billing/partner-stack/use-ps-info.ts
index 51d693f358..7c45d7ef87 100644
--- a/web/app/components/billing/partner-stack/use-ps-info.ts
+++ b/web/app/components/billing/partner-stack/use-ps-info.ts
@@ -1,8 +1,8 @@
 import { useBoolean } from 'ahooks'
 import Cookies from 'js-cookie'
-import { useSearchParams } from 'next/navigation'
 import { useCallback } from 'react'
 import { PARTNER_STACK_CONFIG } from '@/config'
+import { useSearchParams } from '@/next/navigation'
 import { useBindPartnerStackInfo } from '@/service/use-billing'
 
 const usePSInfo = () => {
diff --git a/web/app/components/billing/plan/__tests__/index.spec.tsx b/web/app/components/billing/plan/__tests__/index.spec.tsx
index 79597b4b22..bed7ebd9fb 100644
--- a/web/app/components/billing/plan/__tests__/index.spec.tsx
+++ b/web/app/components/billing/plan/__tests__/index.spec.tsx
@@ -7,7 +7,7 @@ let currentPath = '/billing'
 
 const push = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push }),
   usePathname: () => currentPath,
 }))
diff --git a/web/app/components/billing/plan/index.tsx b/web/app/components/billing/plan/index.tsx
index 2f953c3a8e..6d7af4258d 100644
--- a/web/app/components/billing/plan/index.tsx
+++ b/web/app/components/billing/plan/index.tsx
@@ -7,7 +7,6 @@ import {
   RiGroupLine,
 } from '@remixicon/react'
 import { useUnmountedRef } from 'ahooks'
-import { usePathname, useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -19,6 +18,7 @@ import VerifyStateModal from '@/app/education-apply/verify-state-modal'
 import { useAppContext } from '@/context/app-context'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
+import { usePathname, useRouter } from '@/next/navigation'
 import { useEducationVerify } from '@/service/use-education'
 import { getDaysUntilEndOfMonth } from '@/utils/time'
 import { Loading } from '../../base/icons/src/public/thought'
@@ -103,9 +103,9 @@ const PlanComp: FC<Props> = ({
         <div className="mt-1 flex items-center">
           <div className="grow">
             <div className="mb-1 flex items-center gap-1">
-              <div className="system-md-semibold-uppercase text-text-primary">{t(`plans.${type}.name`, { ns: 'billing' })}</div>
+              <div className="text-text-primary system-md-semibold-uppercase">{t(`plans.${type}.name`, { ns: 'billing' })}</div>
             </div>
-            <div className="system-xs-regular text-util-colors-gray-gray-600">{t(`plans.${type}.for`, { ns: 'billing' })}</div>
+            <div className="text-util-colors-gray-gray-600 system-xs-regular">{t(`plans.${type}.for`, { ns: 'billing' })}</div>
           </div>
           <div className="flex shrink-0 items-center gap-1">
             {enableEducationPlan && (!isEducationAccount || isAboutToExpire) && (
diff --git a/web/app/components/billing/pricing/__tests__/footer.spec.tsx b/web/app/components/billing/pricing/__tests__/footer.spec.tsx
index 7ef78180de..3d204e7212 100644
--- a/web/app/components/billing/pricing/__tests__/footer.spec.tsx
+++ b/web/app/components/billing/pricing/__tests__/footer.spec.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { CategoryEnum } from '..'
 import Footer from '../footer'
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (
     <a href={href} className={className} target={target} data-testid="pricing-link">
       {children}
diff --git a/web/app/components/billing/pricing/__tests__/index.spec.tsx b/web/app/components/billing/pricing/__tests__/index.spec.tsx
index 54813ae0d7..21a0f55bde 100644
--- a/web/app/components/billing/pricing/__tests__/index.spec.tsx
+++ b/web/app/components/billing/pricing/__tests__/index.spec.tsx
@@ -19,7 +19,7 @@ vi.mock('../plans/self-hosted-plan-item/list', () => ({
   ),
 }))
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (
     <a href={href} className={className} target={target} data-testid="pricing-link">
       {children}
diff --git a/web/app/components/billing/pricing/footer.tsx b/web/app/components/billing/pricing/footer.tsx
index 7569ccaa76..22cfdee561 100644
--- a/web/app/components/billing/pricing/footer.tsx
+++ b/web/app/components/billing/pricing/footer.tsx
@@ -1,8 +1,8 @@
 import type { Category } from '.'
 import { RiArrowRightUpLine } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
 import { CategoryEnum } from '.'
 
diff --git a/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx b/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx
index 36120de738..9f3b45ecef 100644
--- a/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx
@@ -5,7 +5,7 @@ import { retrievalIcon } from '../../../create/icons'
 import RetrievalMethodInfo, { getIcon } from '../index'
 
 // Override global next/image auto-mock: tests assert on rendered <img> src attributes via data-testid
-vi.mock('next/image', () => ({
+vi.mock('@/next/image', () => ({
   default: ({ src, alt, className }: { src: string, alt: string, className?: string }) => (
     <img src={src} alt={alt || ''} className={className} data-testid="method-icon" />
   ),
diff --git a/web/app/components/datasets/common/retrieval-method-info/index.tsx b/web/app/components/datasets/common/retrieval-method-info/index.tsx
index 398b79975f..7d14b3e283 100644
--- a/web/app/components/datasets/common/retrieval-method-info/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-info/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { RetrievalConfig } from '@/types/app'
-import Image from 'next/image'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import RadioCard from '@/app/components/base/radio-card'
+import Image from '@/next/image'
 import { RETRIEVE_METHOD } from '@/types/app'
 import { retrievalIcon } from '../../create/icons'
 
diff --git a/web/app/components/datasets/common/retrieval-param-config/index.tsx b/web/app/components/datasets/common/retrieval-param-config/index.tsx
index ef4ebdab73..a04078f809 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -1,9 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import type { RetrievalConfig } from '@/types/app'
-import Image from 'next/image'
-
 import * as React from 'react'
+
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import WeightedScore from '@/app/components/app/configuration/dataset-config/params-config/weighted-score'
@@ -22,6 +21,7 @@ import {
   RerankingModeEnum,
   WeightedScoreEnum,
 } from '@/models/datasets'
+import Image from '@/next/image'
 import { RETRIEVE_METHOD } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import ProgressIndicator from '../../create/assets/progress-indicator.svg'
@@ -127,7 +127,7 @@ const RetrievalParamConfig: FC<Props> = ({
               />
             )}
             <div className="flex items-center">
-              <span className="system-sm-semibold mr-0.5 text-text-secondary">{t('modelProvider.rerankModel.key', { ns: 'common' })}</span>
+              <span className="mr-0.5 text-text-secondary system-sm-semibold">{t('modelProvider.rerankModel.key', { ns: 'common' })}</span>
               <Tooltip
                 popupContent={
                   <div className="w-[200px]">{t('modelProvider.rerankModel.tip', { ns: 'common' })}</div>
@@ -157,7 +157,7 @@ const RetrievalParamConfig: FC<Props> = ({
                     <div className="p-1">
                       <AlertTriangle className="size-4 text-text-warning-secondary" />
                     </div>
-                    <span className="system-xs-medium text-text-primary">
+                    <span className="text-text-primary system-xs-medium">
                       {t('form.retrievalSetting.multiModalTip', { ns: 'datasetSettings' })}
                     </span>
                   </div>
@@ -281,7 +281,7 @@ const RetrievalParamConfig: FC<Props> = ({
                       <div className="p-1">
                         <AlertTriangle className="size-4 text-text-warning-secondary" />
                       </div>
-                      <span className="system-xs-medium text-text-primary">
+                      <span className="text-text-primary system-xs-medium">
                         {t('form.retrievalSetting.multiModalTip', { ns: 'datasetSettings' })}
                       </span>
                     </div>
diff --git a/web/app/components/datasets/create-from-pipeline/__tests__/footer.spec.tsx b/web/app/components/datasets/create-from-pipeline/__tests__/footer.spec.tsx
index 19f1f74e1d..7f1bc0e00c 100644
--- a/web/app/components/datasets/create-from-pipeline/__tests__/footer.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/__tests__/footer.spec.tsx
@@ -7,7 +7,7 @@ import Footer from '../footer'
 let mockSearchParams = new URLSearchParams()
 const mockReplace = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ replace: mockReplace }),
   useSearchParams: () => mockSearchParams,
 }))
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
index 820332dcc3..7f292c8ff9 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
@@ -8,7 +8,7 @@ import TabItem from '../tab/item'
 import Uploader from '../uploader'
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
   }),
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx
index ac56206003..f97b14af0f 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx
@@ -5,7 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { CreateFromDSLModalTab, useDSLImport } from '../use-dsl-import'
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
   }),
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
index c839fad3a2..ff7aa1cafb 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
@@ -1,6 +1,5 @@
 'use client'
 import { useDebounceFn } from 'ahooks'
-import { useRouter } from 'next/navigation'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -10,6 +9,7 @@ import {
   DSLImportMode,
   DSLImportStatus,
 } from '@/models/app'
+import { useRouter } from '@/next/navigation'
 import { useImportPipelineDSL, useImportPipelineDSLConfirm } from '@/service/use-pipeline'
 
 export enum CreateFromDSLModalTab {
diff --git a/web/app/components/datasets/create-from-pipeline/footer.tsx b/web/app/components/datasets/create-from-pipeline/footer.tsx
index 23e83d1da3..d15db38406 100644
--- a/web/app/components/datasets/create-from-pipeline/footer.tsx
+++ b/web/app/components/datasets/create-from-pipeline/footer.tsx
@@ -1,8 +1,8 @@
 import { RiFileUploadLine } from '@remixicon/react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import Divider from '../../base/divider'
 import CreateFromDSLModal, { CreateFromDSLModalTab } from './create-options/create-from-dsl-modal'
@@ -43,7 +43,7 @@ const Footer = () => {
       <Divider type="horizontal" className="my-0 w-8" />
       <button
         type="button"
-        className="system-md-medium flex items-center gap-x-3 text-text-accent"
+        className="flex items-center gap-x-3 text-text-accent system-md-medium"
         onClick={openImportFromDSL}
       >
         <RiFileUploadLine className="size-5" />
diff --git a/web/app/components/datasets/create-from-pipeline/header.tsx b/web/app/components/datasets/create-from-pipeline/header.tsx
index 99738edb08..4aca142c82 100644
--- a/web/app/components/datasets/create-from-pipeline/header.tsx
+++ b/web/app/components/datasets/create-from-pipeline/header.tsx
@@ -1,14 +1,14 @@
 import { RiArrowLeftLine } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 import Button from '../../base/button'
 
 const Header = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="system-md-semibold relative flex px-16 pb-2 pt-5 text-text-primary">
+    <div className="relative flex px-16 pb-2 pt-5 text-text-primary system-md-semibold">
       <span>{t('creation.backToKnowledge', { ns: 'datasetPipeline' })}</span>
       <Link
         className="absolute bottom-0 left-5"
@@ -19,7 +19,7 @@ const Header = () => {
           variant="secondary-accent"
           className="size-9 rounded-full p-0"
         >
-          <RiArrowLeftLine className="size-5 " />
+          <RiArrowLeftLine className="size-5" />
         </Button>
       </Link>
     </div>
diff --git a/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx
index 96bc82f010..c4702df9c7 100644
--- a/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx
@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import CreateCard from '../create-card'
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mockPush }),
 }))
 
diff --git a/web/app/components/datasets/create-from-pipeline/list/create-card.tsx b/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
index b32a7dba2d..7368096aa5 100644
--- a/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/create-card.tsx
@@ -1,10 +1,10 @@
 import { RiAddCircleLine } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import Toast from '@/app/components/base/toast'
+import { useRouter } from '@/next/navigation'
 import { useCreatePipelineDataset } from '@/service/knowledge/use-create-dataset'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 
@@ -49,11 +49,11 @@ const CreateCard = () => {
         <div className="flex size-10 shrink-0 items-center justify-center rounded-[10px] border border-dashed border-divider-regular bg-background-section group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover">
           <RiAddCircleLine className="size-5 text-text-quaternary group-hover:text-text-accent" />
         </div>
-        <div className="system-md-semibold truncate text-text-primary">
+        <div className="truncate text-text-primary system-md-semibold">
           {t('creation.createFromScratch.title', { ns: 'datasetPipeline' })}
         </div>
       </div>
-      <p className="system-xs-regular line-clamp-3 px-4 py-1 text-text-tertiary">
+      <p className="line-clamp-3 px-4 py-1 text-text-tertiary system-xs-regular">
         {t('creation.createFromScratch.description', { ns: 'datasetPipeline' })}
       </p>
     </div>
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
index 4455672383..3dcff12e9d 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
@@ -6,7 +6,7 @@ import { ChunkingMode } from '@/models/datasets'
 import TemplateCard from '../index'
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mockPush }),
 }))
 
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
index b3395a83d5..7684e924b6 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
@@ -1,5 +1,4 @@
 import type { PipelineTemplate } from '@/models/pipeline'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,6 +7,7 @@ import Confirm from '@/app/components/base/confirm'
 import Modal from '@/app/components/base/modal'
 import Toast from '@/app/components/base/toast'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
+import { useRouter } from '@/next/navigation'
 import { useCreatePipelineDatasetFromCustomized } from '@/service/knowledge/use-create-dataset'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import {
diff --git a/web/app/components/datasets/create/__tests__/index.spec.tsx b/web/app/components/datasets/create/__tests__/index.spec.tsx
index 793bc21344..59d5dd891a 100644
--- a/web/app/components/datasets/create/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/__tests__/index.spec.tsx
@@ -24,7 +24,7 @@ const IndexingTypeValues = {
 }
 
 // Mock next/link
-vi.mock('next/link', () => {
+vi.mock('@/next/link', () => {
   return function MockLink({ children, href }: { children: React.ReactNode, href: string }) {
     return <a href={href}>{children}</a>
   }
diff --git a/web/app/components/datasets/create/embedding-process/__tests__/index.spec.tsx b/web/app/components/datasets/create/embedding-process/__tests__/index.spec.tsx
index 9f06abdc41..4773ef6cf2 100644
--- a/web/app/components/datasets/create/embedding-process/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/embedding-process/__tests__/index.spec.tsx
@@ -16,12 +16,12 @@ import {
 
 const mockPush = vi.fn()
 const mockRouter = { push: mockPush }
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => mockRouter,
 }))
 
 // Override global next/image auto-mock: test asserts on data-testid="next-image"
-vi.mock('next/image', () => ({
+vi.mock('@/next/image', () => ({
   default: ({ src, alt, className }: { src: string, alt: string, className?: string }) => (
     // eslint-disable-next-line next/no-img-element
     <img src={src} alt={alt} className={className} data-testid="next-image" />
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index e9cea84f00..fd3c860c74 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -6,8 +6,6 @@ import {
   RiLoader2Fill,
   RiTerminalBoxLine,
 } from '@remixicon/react'
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -15,6 +13,8 @@ import Divider from '@/app/components/base/divider'
 import { Plan } from '@/app/components/billing/type'
 import { useProviderContext } from '@/context/provider-context'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
+import Link from '@/next/link'
+import { useRouter } from '@/next/navigation'
 import { useProcessRule } from '@/service/knowledge/use-dataset'
 import { useInvalidDocumentList } from '@/service/knowledge/use-document'
 import IndexingProgressItem from './indexing-progress-item'
@@ -39,7 +39,7 @@ const StatusHeader: FC<{ isEmbedding: boolean, isCompleted: boolean }> = ({
   const { t } = useTranslation()
 
   return (
-    <div className="system-md-semibold-uppercase flex items-center gap-x-1 text-text-secondary">
+    <div className="flex items-center gap-x-1 text-text-secondary system-md-semibold-uppercase">
       {isEmbedding && (
         <>
           <RiLoader2Fill className="size-4 animate-spin" />
diff --git a/web/app/components/datasets/create/embedding-process/rule-detail.tsx b/web/app/components/datasets/create/embedding-process/rule-detail.tsx
index dff35100cb..6f7bb19b79 100644
--- a/web/app/components/datasets/create/embedding-process/rule-detail.tsx
+++ b/web/app/components/datasets/create/embedding-process/rule-detail.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import type { ProcessRuleResponse } from '@/models/datasets'
-import Image from 'next/image'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata'
 import { ProcessMode } from '@/models/datasets'
+import Image from '@/next/image'
 import { RETRIEVE_METHOD } from '@/types/app'
 import { indexMethodIcon, retrievalIcon } from '../icons'
 import { IndexingType } from '../step-two'
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
index f5379bc543..2df124d7b6 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
@@ -7,7 +7,7 @@ import EmptyDatasetCreationModal from '../index'
 
 // Mock Next.js router
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
   }),
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
index 0a4064de2a..b417c15e8f 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
@@ -1,5 +1,4 @@
 'use client'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +8,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import { ToastContext } from '@/app/components/base/toast/context'
+import { useRouter } from '@/next/navigation'
 
 import { createEmptyDataset } from '@/service/datasets'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
diff --git a/web/app/components/datasets/create/file-uploader/__tests__/index.spec.tsx b/web/app/components/datasets/create/file-uploader/__tests__/index.spec.tsx
index da337efce2..c0635bebd1 100644
--- a/web/app/components/datasets/create/file-uploader/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/file-uploader/__tests__/index.spec.tsx
@@ -58,7 +58,7 @@ vi.mock('@/app/components/datasets/common/document-file-icon', () => ({
 }))
 
 // Mock SimplePieChart
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: () => {
     const Component = ({ percentage }: { percentage: number }) => (
       <div data-testid="pie-chart">
diff --git a/web/app/components/datasets/create/file-uploader/components/__tests__/file-list-item.spec.tsx b/web/app/components/datasets/create/file-uploader/components/__tests__/file-list-item.spec.tsx
index dd88af4395..e7a25cbdd8 100644
--- a/web/app/components/datasets/create/file-uploader/components/__tests__/file-list-item.spec.tsx
+++ b/web/app/components/datasets/create/file-uploader/components/__tests__/file-list-item.spec.tsx
@@ -17,7 +17,7 @@ vi.mock('@/types/app', () => ({
 }))
 
 // Mock SimplePieChart with dynamic import handling
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: () => {
     const DynamicComponent = ({ percentage, stroke, fill }: { percentage: number, stroke: string, fill: string }) => (
       <div data-testid="pie-chart" data-percentage={percentage} data-stroke={stroke} data-fill={fill}>
diff --git a/web/app/components/datasets/create/file-uploader/components/file-list-item.tsx b/web/app/components/datasets/create/file-uploader/components/file-list-item.tsx
index d36773fa5c..2f51a9f767 100644
--- a/web/app/components/datasets/create/file-uploader/components/file-list-item.tsx
+++ b/web/app/components/datasets/create/file-uploader/components/file-list-item.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
 import { RiDeleteBinLine, RiErrorWarningFill } from '@remixicon/react'
-import dynamic from 'next/dynamic'
 import { useMemo } from 'react'
 import DocumentFileIcon from '@/app/components/datasets/common/document-file-icon'
 import useTheme from '@/hooks/use-theme'
+import dynamic from '@/next/dynamic'
 import { Theme } from '@/types/app'
 import { formatFileSize, getFileExtension } from '@/utils/format'
 import { PROGRESS_COMPLETE, PROGRESS_ERROR } from '../constants'
diff --git a/web/app/components/datasets/create/step-two/components/__tests__/indexing-mode-section.spec.tsx b/web/app/components/datasets/create/step-two/components/__tests__/indexing-mode-section.spec.tsx
index 43a944dcd4..e46ff6d484 100644
--- a/web/app/components/datasets/create/step-two/components/__tests__/indexing-mode-section.spec.tsx
+++ b/web/app/components/datasets/create/step-two/components/__tests__/indexing-mode-section.spec.tsx
@@ -6,7 +6,7 @@ import { ChunkingMode } from '@/models/datasets'
 import { IndexingType } from '../../hooks'
 import { IndexingModeSection } from '../indexing-mode-section'
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, ...props }: { children?: React.ReactNode, href?: string, className?: string }) => <a href={href} {...props}>{children}</a>,
 }))
 
diff --git a/web/app/components/datasets/create/step-two/components/__tests__/option-card.spec.tsx b/web/app/components/datasets/create/step-two/components/__tests__/option-card.spec.tsx
index e543efec86..fb2391c251 100644
--- a/web/app/components/datasets/create/step-two/components/__tests__/option-card.spec.tsx
+++ b/web/app/components/datasets/create/step-two/components/__tests__/option-card.spec.tsx
@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { OptionCard, OptionCardHeader } from '../option-card'
 
 // Override global next/image auto-mock: tests assert on rendered <img> elements
-vi.mock('next/image', () => ({
+vi.mock('@/next/image', () => ({
   default: ({ src, alt, ...props }: { src?: string, alt?: string, width?: number, height?: number }) => (
     <img src={src} alt={alt} {...props} />
   ),
diff --git a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
index 0beda8f5c8..66528c82d1 100644
--- a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
+++ b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
@@ -6,7 +6,6 @@ import {
   RiAlertFill,
   RiSearchEyeLine,
 } from '@remixicon/react'
-import Image from 'next/image'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
@@ -15,6 +14,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import SummaryIndexSetting from '@/app/components/datasets/settings/summary-index-setting'
 import { IS_CE_EDITION } from '@/config'
 import { ChunkingMode } from '@/models/datasets'
+import Image from '@/next/image'
 import SettingCog from '../../assets/setting-gear-mod.svg'
 import s from '../index.module.css'
 import LanguageSelect from '../language-select'
@@ -26,7 +26,7 @@ type TextLabelProps = {
 }
 
 const TextLabel: FC<TextLabelProps> = ({ children }) => {
-  return <label className="system-sm-semibold text-text-secondary">{children}</label>
+  return <label className="text-text-secondary system-sm-semibold">{children}</label>
 }
 
 type GeneralChunkingOptionsProps = {
@@ -148,7 +148,7 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
                 onClick={() => onRuleToggle(rule.id)}
               >
                 <Checkbox checked={rule.enabled} />
-                <label className="system-sm-regular ml-2 cursor-pointer text-text-secondary">
+                <label className="ml-2 cursor-pointer text-text-secondary system-sm-regular">
                   {getRuleName(rule.id)}
                 </label>
               </div>
@@ -183,7 +183,7 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
                       checked={currentDocForm === ChunkingMode.qa}
                       disabled={hasCurrentDatasetDocForm}
                     />
-                    <label className="system-sm-regular ml-2 cursor-pointer text-text-secondary">
+                    <label className="ml-2 cursor-pointer text-text-secondary system-sm-regular">
                       {t('stepTwo.useQALanguage', { ns: 'datasetCreation' })}
                     </label>
                   </div>
@@ -202,7 +202,7 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
                     className="mt-2 flex h-10 items-center gap-2 rounded-xl border border-components-panel-border px-3 text-xs shadow-xs backdrop-blur-[5px]"
                   >
                     <RiAlertFill className="size-4 text-text-warning-secondary" />
-                    <span className="system-xs-medium text-text-primary">
+                    <span className="text-text-primary system-xs-medium">
                       {t('stepTwo.QATip', { ns: 'datasetCreation' })}
                     </span>
                   </div>
diff --git a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
index b172778f54..78b6fe705c 100644
--- a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
+++ b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
@@ -3,8 +3,6 @@
 import type { FC } from 'react'
 import type { DefaultModel, Model } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { RetrievalConfig } from '@/types/app'
-import Image from 'next/image'
-import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
@@ -17,6 +15,8 @@ import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-me
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 import { useDocLink } from '@/context/i18n'
 import { ChunkingMode } from '@/models/datasets'
+import Image from '@/next/image'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
 import { indexMethodIcon } from '../../icons'
 import { IndexingType } from '../hooks'
@@ -70,7 +70,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
   return (
     <>
       {/* Index Mode */}
-      <div className="system-md-semibold mb-1 text-text-secondary">
+      <div className="mb-1 text-text-secondary system-md-semibold">
         {t('stepTwo.indexMode', { ns: 'datasetCreation' })}
       </div>
       <div className="flex items-center gap-2">
@@ -160,7 +160,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
           <div className="p-1">
             <AlertTriangle className="size-4 text-text-warning-secondary" />
           </div>
-          <span className="system-xs-medium text-text-primary">
+          <span className="text-text-primary system-xs-medium">
             {t('stepTwo.highQualityTip', { ns: 'datasetCreation' })}
           </span>
         </div>
@@ -168,7 +168,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
 
       {/* Economical index setting tip */}
       {hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
-        <div className="system-xs-medium mt-2 text-text-tertiary">
+        <div className="mt-2 text-text-tertiary system-xs-medium">
           {t('stepTwo.indexSettingTip', { ns: 'datasetCreation' })}
           <Link className="text-text-accent" href={`/datasets/${datasetId}/settings`}>
             {t('stepTwo.datasetSettingLink', { ns: 'datasetCreation' })}
@@ -179,7 +179,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
       {/* Embedding model */}
       {indexType === IndexingType.QUALIFIED && (
         <div className="mt-5">
-          <div className={cn('system-md-semibold mb-1 text-text-secondary', datasetId && 'flex items-center justify-between')}>
+          <div className={cn('mb-1 text-text-secondary system-md-semibold', datasetId && 'flex items-center justify-between')}>
             {t('form.embeddingModel', { ns: 'datasetSettings' })}
           </div>
           <ModelSelector
@@ -190,7 +190,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
             onSelect={onEmbeddingModelChange}
           />
           {isModelAndRetrievalConfigDisabled && (
-            <div className="system-xs-medium mt-2 text-text-tertiary">
+            <div className="mt-2 text-text-tertiary system-xs-medium">
               {t('stepTwo.indexSettingTip', { ns: 'datasetCreation' })}
               <Link className="text-text-accent" href={`/datasets/${datasetId}/settings`}>
                 {t('stepTwo.datasetSettingLink', { ns: 'datasetCreation' })}
@@ -207,10 +207,10 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
         {!isModelAndRetrievalConfigDisabled
           ? (
               <div className="mb-1">
-                <div className="system-md-semibold mb-0.5 text-text-secondary">
+                <div className="mb-0.5 text-text-secondary system-md-semibold">
                   {t('form.retrievalSetting.title', { ns: 'datasetSettings' })}
                 </div>
-                <div className="body-xs-regular text-text-tertiary">
+                <div className="text-text-tertiary body-xs-regular">
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
@@ -224,7 +224,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
               </div>
             )
           : (
-              <div className={cn('system-md-semibold mb-0.5 text-text-secondary', 'flex items-center justify-between')}>
+              <div className={cn('mb-0.5 text-text-secondary system-md-semibold', 'flex items-center justify-between')}>
                 <div>{t('form.retrievalSetting.title', { ns: 'datasetSettings' })}</div>
               </div>
             )}
diff --git a/web/app/components/datasets/create/step-two/components/option-card.tsx b/web/app/components/datasets/create/step-two/components/option-card.tsx
index 55cbf5276f..0945c14ea9 100644
--- a/web/app/components/datasets/create/step-two/components/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/components/option-card.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC, ReactNode } from 'react'
-import Image from 'next/image'
+import Image from '@/next/image'
 import { cn } from '@/utils/classnames'
 
 const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
@@ -34,8 +34,8 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
         className={cn('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
       />
       <div className="flex-1 space-y-0.5 py-3 pr-4">
-        <div className="system-md-semibold text-text-secondary">{title}</div>
-        <div className="system-xs-regular text-text-tertiary">{description}</div>
+        <div className="text-text-secondary system-md-semibold">{title}</div>
+        <div className="text-text-tertiary system-xs-regular">{description}</div>
       </div>
     </div>
   )
diff --git a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
index b7b965a4fd..d603d7a3c7 100644
--- a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
+++ b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
@@ -4,7 +4,6 @@ import type { FC } from 'react'
 import type { ParentChildConfig } from '../hooks'
 import type { ParentMode, PreProcessingRule, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
 import { RiSearchEyeLine } from '@remixicon/react'
-import Image from 'next/image'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
@@ -14,6 +13,7 @@ import RadioCard from '@/app/components/base/radio-card'
 import SummaryIndexSetting from '@/app/components/datasets/settings/summary-index-setting'
 import { IS_CE_EDITION } from '@/config'
 import { ChunkingMode } from '@/models/datasets'
+import Image from '@/next/image'
 import FileList from '../../assets/file-list-3-fill.svg'
 import Note from '../../assets/note-mod.svg'
 import BlueEffect from '../../assets/option-card-effect-blue.svg'
@@ -26,7 +26,7 @@ type TextLabelProps = {
 }
 
 const TextLabel: FC<TextLabelProps> = ({ children }) => {
-  return <label className="system-sm-semibold text-text-secondary">{children}</label>
+  return <label className="text-text-secondary system-sm-semibold">{children}</label>
 }
 
 type ParentChildOptionsProps = {
@@ -186,7 +186,7 @@ export const ParentChildOptions: FC<ParentChildOptionsProps> = ({
                 onClick={() => onRuleToggle(rule.id)}
               >
                 <Checkbox checked={rule.enabled} />
-                <label className="system-sm-regular ml-2 cursor-pointer text-text-secondary">
+                <label className="ml-2 cursor-pointer text-text-secondary system-sm-regular">
                   {getRuleName(rule.id)}
                 </label>
               </div>
diff --git a/web/app/components/datasets/create/top-bar/__tests__/index.spec.tsx b/web/app/components/datasets/create/top-bar/__tests__/index.spec.tsx
index 4fc8d1852b..c038a371d6 100644
--- a/web/app/components/datasets/create/top-bar/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/top-bar/__tests__/index.spec.tsx
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react'
 import { TopBar } from '../index'
 
 // Mock next/link to capture href values
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, replace, className }: { children: React.ReactNode, href: string, replace?: boolean, className?: string }) => (
     <a href={href} data-replace={replace} className={className} data-testid="back-link">
       {children}
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index 0051430511..3ab24446c1 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { StepperProps } from '../stepper'
 import { RiArrowLeftLine } from '@remixicon/react'
-import Link from 'next/link'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
 import { Stepper } from '../stepper'
 
@@ -32,7 +32,7 @@ export const TopBar: FC<TopBarProps> = (props) => {
         <div className="p-2">
           <RiArrowLeftLine className="size-4 text-text-primary" />
         </div>
-        <p className="system-sm-semibold-uppercase text-text-primary">
+        <p className="text-text-primary system-sm-semibold-uppercase">
           {t('steps.header.fallbackRoute', { ns: 'datasetCreation' })}
         </p>
       </Link>
diff --git a/web/app/components/datasets/documents/__tests__/index.spec.tsx b/web/app/components/datasets/documents/__tests__/index.spec.tsx
index f464c97395..2dd91dd7f3 100644
--- a/web/app/components/datasets/documents/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/__tests__/index.spec.tsx
@@ -13,7 +13,7 @@ type MockState = Parameters<MockSelector>[0]
 
 // Mock Next.js router
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
     replace: vi.fn(),
diff --git a/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx b/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
index 5422c23b9a..ce73368e1a 100644
--- a/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
+++ b/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
@@ -4,7 +4,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import Operations from '../operations'
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
   }),
diff --git a/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx b/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
index 279c85f2f0..48e6b58766 100644
--- a/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx
@@ -9,7 +9,7 @@ import DocumentList from '../../list'
 
 const mockPush = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
   }),
diff --git a/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx b/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx
index 1c5145f7ed..d5e4f480be 100644
--- a/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx
+++ b/web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx
@@ -9,7 +9,7 @@ import DocumentTableRow from '../document-table-row'
 const mockPush = vi.fn()
 let mockSearchParams = ''
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
   }),
diff --git a/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx b/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx
index 3694b81138..c5f0f0af37 100644
--- a/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx
+++ b/web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import type { SimpleDocumentDetail } from '@/models/datasets'
 import { pick } from 'es-toolkit/object'
-import { useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,6 +12,7 @@ import SummaryStatus from '@/app/components/datasets/documents/detail/completed/
 import StatusItem from '@/app/components/datasets/documents/status-item'
 import useTimestamp from '@/hooks/use-timestamp'
 import { DataSourceType } from '@/models/datasets'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { formatNumber } from '@/utils/format'
 import DocumentSourceIcon from './document-source-icon'
 import { renderTdValue } from './utils'
diff --git a/web/app/components/datasets/documents/components/operations.tsx b/web/app/components/datasets/documents/components/operations.tsx
index 84e16c7c48..ff3563c3fe 100644
--- a/web/app/components/datasets/documents/components/operations.tsx
+++ b/web/app/components/datasets/documents/components/operations.tsx
@@ -14,7 +14,6 @@ import {
 } from '@remixicon/react'
 import { useBoolean, useDebounceFn } from 'ahooks'
 import { noop } from 'es-toolkit/function'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -28,6 +27,7 @@ import { ToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import { IS_CE_EDITION } from '@/config'
 import { DataSourceType, DocumentActionType } from '@/models/datasets'
+import { useRouter } from '@/next/navigation'
 import {
   useDocumentArchive,
   useDocumentDelete,
diff --git a/web/app/components/datasets/documents/create-from-pipeline/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/__tests__/index.spec.tsx
index 0096dc8c29..8a2e251770 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/__tests__/index.spec.tsx
@@ -90,7 +90,7 @@ vi.mock('@/app/components/base/amplitude', () => ({
   trackEvent: vi.fn(),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ datasetId: 'test-dataset-id' }),
   useRouter: () => ({
     push: vi.fn(),
@@ -101,7 +101,7 @@ vi.mock('next/navigation', () => ({
 }))
 
 // Mock next/link
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href }: { children: React.ReactNode, href: string }) => (
     <a href={href}>{children}</a>
   ),
diff --git a/web/app/components/datasets/documents/create-from-pipeline/__tests__/left-header.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/__tests__/left-header.spec.tsx
index 584c21e826..c4ddec7434 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/__tests__/left-header.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/__tests__/left-header.spec.tsx
@@ -3,11 +3,11 @@ import { render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import LeftHeader from '../left-header'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ datasetId: 'test-ds-id' }),
 }))
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href }: { children: React.ReactNode, href: string }) => (
     <a href={href} data-testid="back-link">{children}</a>
   ),
diff --git a/web/app/components/datasets/documents/create-from-pipeline/actions/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/actions/__tests__/index.spec.tsx
index 45ecaa7e9b..93861ef76a 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/actions/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/actions/__tests__/index.spec.tsx
@@ -4,12 +4,12 @@ import Actions from '../index'
 
 // Mock next/navigation - useParams returns datasetId
 const mockDatasetId = 'test-dataset-id'
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ datasetId: mockDatasetId }),
 }))
 
 // Mock next/link to capture href
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, replace }: { children: React.ReactNode, href: string, replace?: boolean }) => (
     <a href={href} data-replace={replace}>
       {children}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
index de0609b4d8..7946637a0a 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
@@ -1,11 +1,11 @@
 import { RiArrowRightLine } from '@remixicon/react'
-import Link from 'next/link'
-import { useParams } from 'next/navigation'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
+import Link from '@/next/link'
+import { useParams } from '@/next/navigation'
 
 type ActionsProps = {
   disabled?: boolean
@@ -55,12 +55,12 @@ const Actions = ({
               indeterminate={indeterminate}
               checked={checked}
             />
-            <span className="system-sm-medium text-text-accent">
+            <span className="text-text-accent system-sm-medium">
               {t('operation.selectAll', { ns: 'common' })}
             </span>
           </div>
           {tip && (
-            <div title={tip} className="system-xs-regular max-w-full truncate text-text-tertiary">
+            <div title={tip} className="max-w-full truncate text-text-tertiary system-xs-regular">
               {tip}
             </div>
           )}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/__tests__/index.spec.tsx
index 87010638b2..4ec21ab1fb 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/__tests__/index.spec.tsx
@@ -26,7 +26,7 @@ vi.mock('@/app/components/datasets/common/document-file-icon', () => ({
 }))
 
 // Mock SimplePieChart
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: () => {
     const Component = ({ percentage }: { percentage: number }) => (
       <div data-testid="pie-chart">
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/__tests__/file-list-item.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/__tests__/file-list-item.spec.tsx
index df7fe3540b..fcb0878978 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/__tests__/file-list-item.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/__tests__/file-list-item.spec.tsx
@@ -17,7 +17,7 @@ vi.mock('@/types/app', () => ({
 }))
 
 // Mock SimplePieChart with dynamic import handling
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: () => {
     const DynamicComponent = ({ percentage, stroke, fill }: { percentage: number, stroke: string, fill: string }) => (
       <div data-testid="pie-chart" data-percentage={percentage} data-stroke={stroke} data-fill={fill}>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx
index 1a61fa04f0..4338dd05d4 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/file-list-item.tsx
@@ -1,10 +1,10 @@
 import type { CustomFile as File, FileItem } from '@/models/datasets'
 import { RiDeleteBinLine, RiErrorWarningFill } from '@remixicon/react'
-import dynamic from 'next/dynamic'
 import { useMemo } from 'react'
 import DocumentFileIcon from '@/app/components/datasets/common/document-file-icon'
 import { getFileType } from '@/app/components/datasets/common/image-uploader/utils'
 import useTheme from '@/hooks/use-theme'
+import dynamic from '@/next/dynamic'
 import { Theme } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/utils.spec.ts b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/utils.spec.ts
index 7c5761be8a..95fb6052b3 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/utils.spec.ts
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/utils.spec.ts
@@ -87,7 +87,7 @@ describe('online-drive utils', () => {
             { id: 'f2', name: 'folder', size: 0, type: 'folder' as const },
           ],
           is_truncated: true,
-          next_page_parameters: { token: 'next' },
+          next_page_parameters: { token: '@/next' },
         },
       ] as OnlineDriveData[]
 
@@ -98,7 +98,7 @@ describe('online-drive utils', () => {
       expect(result.fileList[1].type).toBe(OnlineDriveFileType.folder)
       expect(result.fileList[1].size).toBeUndefined()
       expect(result.isTruncated).toBe(true)
-      expect(result.nextPageParameters).toEqual({ token: 'next' })
+      expect(result.nextPageParameters).toEqual({ token: '@/next' })
       expect(result.hasBucket).toBe(true)
     })
   })
diff --git a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
index 2b30c79022..810140c410 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
@@ -1,10 +1,10 @@
 import type { Step } from './step-indicator'
 import { RiArrowLeftLine } from '@remixicon/react'
-import Link from 'next/link'
-import { useParams } from 'next/navigation'
 import * as React from 'react'
 import Button from '@/app/components/base/button'
 import Effect from '@/app/components/base/effect'
+import Link from '@/next/link'
+import { useParams } from '@/next/navigation'
 import StepIndicator from './step-indicator'
 
 type LeftHeaderProps = {
@@ -23,13 +23,13 @@ const LeftHeader = ({
   return (
     <div className="relative flex flex-col gap-y-0.5 pb-2 pt-4">
       <div className="flex items-center gap-x-2">
-        <span className="system-2xs-semibold-uppercase bg-pipeline-add-documents-title-bg bg-clip-text text-transparent">
+        <span className="bg-pipeline-add-documents-title-bg bg-clip-text text-transparent system-2xs-semibold-uppercase">
           {title}
         </span>
-        <span className="system-2xs-regular text-divider-regular">/</span>
+        <span className="text-divider-regular system-2xs-regular">/</span>
         <StepIndicator steps={steps} currentStep={currentStep} />
       </div>
-      <div className="system-md-semibold text-text-primary">
+      <div className="text-text-primary system-md-semibold">
         {steps[currentStep - 1]?.label}
       </div>
       {currentStep !== steps.length && (
@@ -41,7 +41,7 @@ const LeftHeader = ({
             variant="secondary-accent"
             className="absolute -left-11 top-3.5 size-9 rounded-full p-0"
           >
-            <RiArrowLeftLine className="size-5 " />
+            <RiArrowLeftLine className="size-5" />
           </Button>
         </Link>
       )}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/index.spec.tsx
index aa107b8635..f59f5c091b 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/index.spec.tsx
@@ -10,14 +10,14 @@ import { RETRIEVE_METHOD } from '@/types/app'
 import EmbeddingProcess from '../index'
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
   }),
 }))
 
 // Mock next/link
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: function MockLink({ children, href, ...props }: { children: React.ReactNode, href: string }) {
     return <a href={href} {...props}>{children}</a>
   },
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/rule-detail.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/rule-detail.spec.tsx
index c11caeb156..4feb4ba45b 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/rule-detail.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/rule-detail.spec.tsx
@@ -7,7 +7,7 @@ import { RETRIEVE_METHOD } from '@/types/app'
 import RuleDetail from '../rule-detail'
 
 // Override global next/image auto-mock: tests assert on data-testid="next-image" and src attributes
-vi.mock('next/image', () => ({
+vi.mock('@/next/image', () => ({
   default: function MockImage({ src, alt, className }: { src: string, alt: string, className?: string }) {
     // eslint-disable-next-line next/no-img-element
     return <img src={src} alt={alt} className={className} data-testid="next-image" />
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
index a7834fc656..c2f71067fa 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
@@ -10,8 +10,6 @@ import {
   RiLoader2Fill,
   RiTerminalBoxLine,
 } from '@remixicon/react'
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -26,6 +24,8 @@ import DocumentFileIcon from '@/app/components/datasets/common/document-file-ico
 import { useProviderContext } from '@/context/provider-context'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
 import { DatasourceType } from '@/models/pipeline'
+import Link from '@/next/link'
+import { useRouter } from '@/next/navigation'
 import { useIndexingStatusBatch, useProcessRule } from '@/service/knowledge/use-dataset'
 import { useInvalidDocumentList } from '@/service/knowledge/use-document'
 import { cn } from '@/utils/classnames'
@@ -134,7 +134,7 @@ const EmbeddingProcess = ({
   return (
     <>
       <div className="flex flex-col gap-y-3">
-        <div className="system-md-semibold-uppercase flex items-center gap-x-1 text-text-secondary">
+        <div className="flex items-center gap-x-1 text-text-secondary system-md-semibold-uppercase">
           {(isEmbeddingWaiting || isEmbedding) && (
             <>
               <RiLoader2Fill className="size-4 animate-spin" />
@@ -151,7 +151,7 @@ const EmbeddingProcess = ({
               <div className="flex shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 shadow-md shadow-shadow-shadow-5">
                 <RiAedFill className="size-4 text-text-primary-on-surface" />
               </div>
-              <div className="system-md-medium grow text-text-primary">
+              <div className="grow text-text-primary system-md-medium">
                 {t('plansCommon.documentProcessingPriorityUpgrade', { ns: 'billing' })}
               </div>
               <UpgradeBtn loc="knowledge-speed-up" />
@@ -190,7 +190,7 @@ const EmbeddingProcess = ({
                   />
                 )}
                 <div className="flex w-0 grow items-center gap-1" title={getSourceName(indexingStatusDetail.id)}>
-                  <div className="system-xs-medium truncate text-text-secondary">
+                  <div className="truncate text-text-secondary system-xs-medium">
                     {getSourceName(indexingStatusDetail.id)}
                   </div>
                   {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx
index 8fe6af6170..a0ffca99d9 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx
@@ -1,5 +1,4 @@
 import type { ProcessRuleResponse } from '@/models/datasets'
-import Image from 'next/image'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -7,6 +6,7 @@ import { indexMethodIcon, retrievalIcon } from '@/app/components/datasets/create
 import { IndexingType } from '@/app/components/datasets/create/step-two'
 import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata'
 import { ProcessMode } from '@/models/datasets'
+import Image from '@/next/image'
 import { RETRIEVE_METHOD } from '@/types/app'
 
 type RuleDetailProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/steps/__tests__/step-one-content.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/steps/__tests__/step-one-content.spec.tsx
index ff0c1b125c..2e121dbbd1 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/steps/__tests__/step-one-content.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/steps/__tests__/step-one-content.spec.tsx
@@ -143,7 +143,7 @@ vi.mock('@/service/base', () => ({
   upload: vi.fn().mockResolvedValue({ id: 'uploaded-file-id' }),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ datasetId: 'mock-dataset-id' }),
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/datasets/mock-dataset-id',
diff --git a/web/app/components/datasets/documents/detail/__tests__/document-title.spec.tsx b/web/app/components/datasets/documents/detail/__tests__/document-title.spec.tsx
index e7945fc409..3eb1017b8d 100644
--- a/web/app/components/datasets/documents/detail/__tests__/document-title.spec.tsx
+++ b/web/app/components/datasets/documents/detail/__tests__/document-title.spec.tsx
@@ -5,7 +5,7 @@ import { ChunkingMode } from '@/models/datasets'
 import { DocumentTitle } from '../document-title'
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
   }),
diff --git a/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
index f01a64e34e..be4d2304bd 100644
--- a/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
@@ -25,7 +25,7 @@ const mocks = vi.hoisted(() => {
 })
 
 // --- External mocks ---
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mocks.push }),
   useSearchParams: () => new URLSearchParams(mocks.state.searchParams),
 }))
diff --git a/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx b/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx
index 73082108a0..dd0cc3cd16 100644
--- a/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx
+++ b/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx
@@ -6,7 +6,7 @@ import { IndexingType } from '../../../create/step-two'
 
 import NewSegmentModal from '../new-segment'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({
     datasetId: 'test-dataset-id',
     documentId: 'test-document-id',
diff --git a/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
index 59ecbf5f25..2a68e6f627 100644
--- a/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
@@ -49,7 +49,7 @@ const {
   mockOnDelete: vi.fn(),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: () => '/datasets/test-dataset-id/documents/test-document-id',
 }))
 
diff --git a/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx b/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx
index 1b26a15b65..48e8782740 100644
--- a/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx
@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import NewChildSegmentModal from '../new-child-segment'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({
     datasetId: 'test-dataset-id',
     documentId: 'test-document-id',
diff --git a/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts b/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts
index f54c00e3e7..6e9239c972 100644
--- a/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts
+++ b/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts
@@ -68,7 +68,7 @@ const {
   mockPathname: { current: '/datasets/test/documents/test' },
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: () => mockPathname.current,
 }))
 
diff --git a/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts b/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts
index aa91e9f464..8948f6b547 100644
--- a/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts
+++ b/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts
@@ -1,12 +1,12 @@
 import type { FileEntity } from '@/app/components/datasets/common/image-uploader/types'
 import type { SegmentDetailModel, SegmentsResponse, SegmentUpdater } from '@/models/datasets'
 import { useQueryClient } from '@tanstack/react-query'
-import { usePathname } from 'next/navigation'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useToastContext } from '@/app/components/base/toast/context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { ChunkingMode } from '@/models/datasets'
+import { usePathname } from '@/next/navigation'
 import {
   useChunkListAllKey,
   useChunkListDisabledKey,
diff --git a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
index 7a6ae4b306..edc0fca04c 100644
--- a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
+++ b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import type { ChildChunkDetail, SegmentUpdater } from '@/models/datasets'
 import { RiCloseLine, RiExpandDiagonalLine } from '@remixicon/react'
-import { useParams } from 'next/navigation'
 import { memo, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -10,6 +9,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import Divider from '@/app/components/base/divider'
 import { ToastContext } from '@/app/components/base/toast/context'
 import { ChunkingMode } from '@/models/datasets'
+import { useParams } from '@/next/navigation'
 import { useAddChildSegment } from '@/service/knowledge/use-segment'
 import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
@@ -58,7 +58,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
       <Divider type="vertical" className="mx-1 h-3 bg-divider-regular" />
       <button
         type="button"
-        className="system-xs-semibold text-text-accent"
+        className="text-text-accent system-xs-semibold"
         onClick={() => {
           clearTimeout(refreshTimer.current)
           viewNewlyAddedChildChunk?.()
@@ -120,11 +120,11 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
     <div className="flex h-full flex-col">
       <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
         <div className="flex flex-col">
-          <div className="system-xl-semibold text-text-primary">{t('segment.addChildChunk', { ns: 'datasetDocuments' })}</div>
+          <div className="text-text-primary system-xl-semibold">{t('segment.addChildChunk', { ns: 'datasetDocuments' })}</div>
           <div className="flex items-center gap-x-2">
             <SegmentIndexTag label={t('segment.newChildChunk', { ns: 'datasetDocuments' }) as string} />
             <Dot />
-            <span className="system-xs-medium text-text-tertiary">{wordCountText}</span>
+            <span className="text-text-tertiary system-xs-medium">{wordCountText}</span>
           </div>
         </div>
         <div className="flex items-center">
diff --git a/web/app/components/datasets/documents/detail/document-title.tsx b/web/app/components/datasets/documents/detail/document-title.tsx
index ec44e3ea97..2190338ab2 100644
--- a/web/app/components/datasets/documents/detail/document-title.tsx
+++ b/web/app/components/datasets/documents/detail/document-title.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import type { ChunkingMode, ParentMode } from '@/models/datasets'
-import { useRouter } from 'next/navigation'
+import { useRouter } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 import DocumentPicker from '../../common/document-picker'
 
diff --git a/web/app/components/datasets/documents/detail/embedding/components/rule-detail.tsx b/web/app/components/datasets/documents/detail/embedding/components/rule-detail.tsx
index 486b94175b..e287ede2d9 100644
--- a/web/app/components/datasets/documents/detail/embedding/components/rule-detail.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/components/rule-detail.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import type { ProcessRuleResponse } from '@/models/datasets'
 import type { RETRIEVE_METHOD } from '@/types/app'
-import Image from 'next/image'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { ProcessMode } from '@/models/datasets'
+import Image from '@/next/image'
 import { indexMethodIcon, retrievalIcon } from '../../../../create/icons'
 import { IndexingType } from '../../../../create/step-two'
 import { FieldInfo } from '../../metadata'
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index b6842605c6..891c177169 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSourceInfo, FileItem, FullDocumentDetail, LegacyDataSourceInfo } from '@/models/datasets'
-import { useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,6 +12,7 @@ import Metadata from '@/app/components/datasets/metadata/metadata-document'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { ChunkingMode } from '@/models/datasets'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { useDocumentDetail, useDocumentMetadata, useInvalidDocumentList } from '@/service/knowledge/use-document'
 import { useCheckSegmentBatchImportProgress, useChildSegmentListKey, useSegmentBatchImport, useSegmentListKey } from '@/service/knowledge/use-segment'
 import { useInvalid } from '@/service/use-base'
diff --git a/web/app/components/datasets/documents/detail/new-segment.tsx b/web/app/components/datasets/documents/detail/new-segment.tsx
index f32c94bf70..8db909f889 100644
--- a/web/app/components/datasets/documents/detail/new-segment.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment.tsx
@@ -2,7 +2,6 @@ import type { FC } from 'react'
 import type { FileEntity } from '@/app/components/datasets/common/image-uploader/types'
 import type { SegmentUpdater } from '@/models/datasets'
 import { RiCloseLine, RiExpandDiagonalLine } from '@remixicon/react'
-import { useParams } from 'next/navigation'
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -13,6 +12,7 @@ import { ToastContext } from '@/app/components/base/toast/context'
 import ImageUploaderInChunk from '@/app/components/datasets/common/image-uploader/image-uploader-in-chunk'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { ChunkingMode } from '@/models/datasets'
+import { useParams } from '@/next/navigation'
 import { useAddSegment } from '@/service/knowledge/use-segment'
 import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
@@ -61,7 +61,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
       <Divider type="vertical" className="mx-1 h-3 bg-divider-regular" />
       <button
         type="button"
-        className="system-xs-semibold text-text-accent"
+        className="text-text-accent system-xs-semibold"
         onClick={() => {
           clearTimeout(refreshTimer.current)
           viewNewlyAddedChunk()
@@ -158,13 +158,13 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
         className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}
       >
         <div className="flex flex-col">
-          <div className="system-xl-semibold text-text-primary">
+          <div className="text-text-primary system-xl-semibold">
             {t('segment.addChunk', { ns: 'datasetDocuments' })}
           </div>
           <div className="flex items-center gap-x-2">
             <SegmentIndexTag label={t('segment.newChunk', { ns: 'datasetDocuments' })!} />
             <Dot />
-            <span className="system-xs-medium text-text-tertiary">{wordCountText}</span>
+            <span className="text-text-tertiary system-xs-medium">{wordCountText}</span>
           </div>
         </div>
         <div className="flex items-center">
diff --git a/web/app/components/datasets/documents/detail/settings/__tests__/document-settings.spec.tsx b/web/app/components/datasets/documents/detail/settings/__tests__/document-settings.spec.tsx
index e6109132a4..dbf7caeda1 100644
--- a/web/app/components/datasets/documents/detail/settings/__tests__/document-settings.spec.tsx
+++ b/web/app/components/datasets/documents/detail/settings/__tests__/document-settings.spec.tsx
@@ -5,7 +5,7 @@ import DocumentSettings from '../document-settings'
 
 const mockPush = vi.fn()
 const mockBack = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
     back: mockBack,
diff --git a/web/app/components/datasets/documents/detail/settings/document-settings.tsx b/web/app/components/datasets/documents/detail/settings/document-settings.tsx
index 0d10f8a51e..093b6b8d84 100644
--- a/web/app/components/datasets/documents/detail/settings/document-settings.tsx
+++ b/web/app/components/datasets/documents/detail/settings/document-settings.tsx
@@ -10,7 +10,6 @@ import type {
   WebsiteCrawlInfo,
 } from '@/models/datasets'
 import { useBoolean } from 'ahooks'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -22,6 +21,7 @@ import AccountSetting from '@/app/components/header/account-setting'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import DatasetDetailContext from '@/context/dataset-detail'
+import { useRouter } from '@/next/navigation'
 import { useDocumentDetail, useInvalidDocumentDetail, useInvalidDocumentList } from '@/service/knowledge/use-document'
 
 type DocumentSettingsProps = {
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/__tests__/index.spec.tsx
index 9f2ccc0acd..764667c55c 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/__tests__/index.spec.tsx
@@ -7,7 +7,7 @@ import PipelineSettings from '../index'
 // Mock Next.js router
 const mockPush = vi.fn()
 const mockBack = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
     back: mockBack,
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/__tests__/left-header.spec.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/__tests__/left-header.spec.tsx
index 9a1ffab673..30019ca67d 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/__tests__/left-header.spec.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/__tests__/left-header.spec.tsx
@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import LeftHeader from '../left-header'
 
 const mockBack = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     back: mockBack,
   }),
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
index 08e13765e5..4c9dd641e3 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
@@ -2,13 +2,13 @@ import type { NotionPage } from '@/models/common'
 import type { CrawlResultItem, CustomFile, FileIndexingEstimateResponse } from '@/models/datasets'
 import type { OnlineDriveFile, PublishedPipelineRunPreviewResponse } from '@/models/pipeline'
 import { noop } from 'es-toolkit/function'
-import { useRouter } from 'next/navigation'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { DatasourceType } from '@/models/pipeline'
+import { useRouter } from '@/next/navigation'
 import { useInvalidDocumentDetail, useInvalidDocumentList } from '@/service/knowledge/use-document'
 import { usePipelineExecutionLog, useRunPublishedPipeline } from '@/service/use-pipeline'
 import ChunkPreview from '../../../create-from-pipeline/preview/chunk-preview'
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
index 280d835586..903cd95b15 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
@@ -1,10 +1,10 @@
 import { RiArrowLeftLine } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Effect from '@/app/components/base/effect'
+import { useRouter } from '@/next/navigation'
 
 type LeftHeaderProps = {
   title: string
@@ -22,10 +22,10 @@ const LeftHeader = ({
 
   return (
     <div className="relative flex flex-col gap-y-0.5 pb-2 pt-4">
-      <div className="system-2xs-semibold-uppercase bg-pipeline-add-documents-title-bg bg-clip-text text-transparent">
+      <div className="bg-pipeline-add-documents-title-bg bg-clip-text text-transparent system-2xs-semibold-uppercase">
         {title}
       </div>
-      <div className="system-md-semibold text-text-primary">
+      <div className="text-text-primary system-md-semibold">
         {t('addDocuments.steps.processDocuments', { ns: 'datasetPipeline' })}
       </div>
       <Button
@@ -34,7 +34,7 @@ const LeftHeader = ({
         onClick={navigateBack}
         aria-label={t('operation.back', { ns: 'common' })}
       >
-        <RiArrowLeftLine className="size-5 " />
+        <RiArrowLeftLine className="size-5" />
       </Button>
       <Effect className="left-8 top-[-34px] opacity-20" />
     </div>
diff --git a/web/app/components/datasets/documents/index.tsx b/web/app/components/datasets/documents/index.tsx
index 764b04227c..29d9c01f71 100644
--- a/web/app/components/datasets/documents/index.tsx
+++ b/web/app/components/datasets/documents/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
-import { useRouter } from 'next/navigation'
 import { useCallback } from 'react'
 import Loading from '@/app/components/base/loading'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useProviderContext } from '@/context/provider-context'
 import { DataSourceType } from '@/models/datasets'
+import { useRouter } from '@/next/navigation'
 import { useDocumentList, useInvalidDocumentDetail, useInvalidDocumentList } from '@/service/knowledge/use-document'
 import { useChildSegmentListKey, useSegmentListKey } from '@/service/knowledge/use-segment'
 import { useInvalid } from '@/service/use-base'
diff --git a/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx b/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx
index a6a60aa856..64b24fb08f 100644
--- a/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx
@@ -7,7 +7,7 @@ import ExternalKnowledgeBaseConnector from '../index'
 
 const mockRouterBack = vi.fn()
 const mockReplace = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     back: mockRouterBack,
     replace: mockReplace,
diff --git a/web/app/components/datasets/external-knowledge-base/connector/index.tsx b/web/app/components/datasets/external-knowledge-base/connector/index.tsx
index cf36eed382..789e92c668 100644
--- a/web/app/components/datasets/external-knowledge-base/connector/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/connector/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 
 import type { CreateKnowledgeBaseReq } from '@/app/components/datasets/external-knowledge-base/create/declarations'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useState } from 'react'
 import { trackEvent } from '@/app/components/base/amplitude'
 import { useToastContext } from '@/app/components/base/toast/context'
 import ExternalKnowledgeBaseCreate from '@/app/components/datasets/external-knowledge-base/create'
+import { useRouter } from '@/next/navigation'
 import { createExternalKnowledgeBase } from '@/service/datasets'
 
 const ExternalKnowledgeBaseConnector = () => {
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
index f84e6c57c1..091725e67b 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
@@ -2,13 +2,13 @@ import {
   RiAddLine,
   RiArrowDownSLine,
 } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import { useModalContext } from '@/context/modal-context'
+import { useRouter } from '@/next/navigation'
 
 type ApiItem = {
   value: string
@@ -69,12 +69,12 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onS
               <div className="flex items-center gap-2 self-stretch rounded-lg p-1">
                 <ApiConnectionMod className="h-4 w-4 text-text-secondary" />
                 <div className="flex grow items-center">
-                  <span className="system-sm-regular overflow-hidden text-ellipsis text-components-input-text-filled">{selectedItem.name}</span>
+                  <span className="overflow-hidden text-ellipsis text-components-input-text-filled system-sm-regular">{selectedItem.name}</span>
                 </div>
               </div>
             )
           : (
-              <span className="system-sm-regular text-components-input-text-placeholder">{t('selectExternalKnowledgeAPI.placeholder', { ns: 'dataset' })}</span>
+              <span className="text-components-input-text-placeholder system-sm-regular">{t('selectExternalKnowledgeAPI.placeholder', { ns: 'dataset' })}</span>
             )}
         <RiArrowDownSLine className={`h-4 w-4 text-text-quaternary transition-transform ${isOpen ? 'text-text-secondary' : ''}`} />
       </div>
@@ -88,8 +88,8 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onS
             >
               <div className="flex w-full items-center gap-2 self-stretch rounded-lg p-2 hover:bg-state-base-hover">
                 <ApiConnectionMod className="h-4 w-4 text-text-secondary" />
-                <span className="system-sm-medium grow overflow-hidden text-ellipsis text-text-secondary">{item.name}</span>
-                <span className="system-xs-regular overflow-hidden text-ellipsis text-right text-text-tertiary">{item.url}</span>
+                <span className="grow overflow-hidden text-ellipsis text-text-secondary system-sm-medium">{item.name}</span>
+                <span className="overflow-hidden text-ellipsis text-right text-text-tertiary system-xs-regular">{item.url}</span>
               </div>
             </div>
           ))}
@@ -99,7 +99,7 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onS
               onClick={handleAddNewAPI}
             >
               <RiAddLine className="h-4 w-4 text-text-secondary" />
-              <span className="system-sm-medium grow overflow-hidden text-ellipsis text-text-secondary">{t('createNewExternalAPI', { ns: 'dataset' })}</span>
+              <span className="grow overflow-hidden text-ellipsis text-text-secondary system-sm-medium">{t('createNewExternalAPI', { ns: 'dataset' })}</span>
             </div>
           </div>
         </div>
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
index 75b9e8de9c..8a9f7db148 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { RiAddLine } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +8,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import { useModalContext } from '@/context/modal-context'
+import { useRouter } from '@/next/navigation'
 import ExternalApiSelect from './ExternalApiSelect'
 
 type ExternalApiSelectionProps = {
@@ -63,7 +63,7 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
     <form className="flex flex-col gap-4 self-stretch">
       <div className="flex flex-col gap-1 self-stretch">
         <div className="flex flex-col self-stretch">
-          <label className="system-sm-semibold text-text-secondary">{t('externalAPIPanelTitle', { ns: 'dataset' })}</label>
+          <label className="text-text-secondary system-sm-semibold">{t('externalAPIPanelTitle', { ns: 'dataset' })}</label>
         </div>
         {apiItems.length > 0
           ? (
@@ -79,13 +79,13 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
           : (
               <Button variant="tertiary" onClick={handleAddNewAPI} className="justify-start gap-0.5">
                 <RiAddLine className="h-4 w-4 text-text-tertiary" />
-                <span className="system-sm-regular text-text-tertiary">{t('noExternalKnowledge', { ns: 'dataset' })}</span>
+                <span className="text-text-tertiary system-sm-regular">{t('noExternalKnowledge', { ns: 'dataset' })}</span>
               </Button>
             )}
       </div>
       <div className="flex flex-col gap-1 self-stretch">
         <div className="flex flex-col self-stretch">
-          <label className="system-sm-semibold text-text-secondary">{t('externalKnowledgeId', { ns: 'dataset' })}</label>
+          <label className="text-text-secondary system-sm-semibold">{t('externalKnowledgeId', { ns: 'dataset' })}</label>
         </div>
         <Input
           value={external_knowledge_id}
diff --git a/web/app/components/datasets/external-knowledge-base/create/__tests__/ExternalApiSelect.spec.tsx b/web/app/components/datasets/external-knowledge-base/create/__tests__/ExternalApiSelect.spec.tsx
index 3b8b35a5b7..7af75fbcdd 100644
--- a/web/app/components/datasets/external-knowledge-base/create/__tests__/ExternalApiSelect.spec.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/__tests__/ExternalApiSelect.spec.tsx
@@ -12,7 +12,7 @@ const mocks = vi.hoisted(() => ({
   mutateExternalKnowledgeApis: vi.fn(),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mocks.push, refresh: mocks.refresh }),
 }))
 
diff --git a/web/app/components/datasets/external-knowledge-base/create/__tests__/ExternalApiSelection.spec.tsx b/web/app/components/datasets/external-knowledge-base/create/__tests__/ExternalApiSelection.spec.tsx
index 702890bee9..97934f36e1 100644
--- a/web/app/components/datasets/external-knowledge-base/create/__tests__/ExternalApiSelection.spec.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/__tests__/ExternalApiSelection.spec.tsx
@@ -10,7 +10,7 @@ const mocks = vi.hoisted(() => ({
   externalKnowledgeApiList: [] as Array<{ id: string, name: string, settings: { endpoint: string } }>,
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mocks.push, refresh: mocks.refresh }),
 }))
 
diff --git a/web/app/components/datasets/external-knowledge-base/create/__tests__/index.spec.tsx b/web/app/components/datasets/external-knowledge-base/create/__tests__/index.spec.tsx
index b8aa8b33d7..5b6ee3210f 100644
--- a/web/app/components/datasets/external-knowledge-base/create/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/__tests__/index.spec.tsx
@@ -7,7 +7,7 @@ import RetrievalSettings from '../RetrievalSettings'
 
 const mockReplace = vi.fn()
 const mockRefresh = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: mockReplace,
     push: vi.fn(),
diff --git a/web/app/components/datasets/external-knowledge-base/create/index.tsx b/web/app/components/datasets/external-knowledge-base/create/index.tsx
index 07b6e71fa6..a90919502c 100644
--- a/web/app/components/datasets/external-knowledge-base/create/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/index.tsx
@@ -2,12 +2,12 @@
 
 import type { CreateKnowledgeBaseReq } from './declarations'
 import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { useDocLink } from '@/context/i18n'
+import { useRouter } from '@/next/navigation'
 import ExternalApiSelection from './ExternalApiSelection'
 import InfoPanel from './InfoPanel'
 import KnowledgeBaseInfo from './KnowledgeBaseInfo'
@@ -56,12 +56,12 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
         <div className="flex w-full max-w-[960px] flex-col items-center px-14 py-0">
           <div className="flex w-full max-w-[640px] grow flex-col items-center gap-4 pb-8 pt-6">
             <div className="relative flex flex-col items-center gap-[2px] self-stretch py-2">
-              <div className="system-xl-semibold grow self-stretch text-text-primary">{t('connectDataset', { ns: 'dataset' })}</div>
-              <p className="system-sm-regular text-text-tertiary">
+              <div className="grow self-stretch text-text-primary system-xl-semibold">{t('connectDataset', { ns: 'dataset' })}</div>
+              <p className="text-text-tertiary system-sm-regular">
                 <span>{t('connectHelper.helper1', { ns: 'dataset' })}</span>
-                <span className="system-sm-medium text-text-secondary">{t('connectHelper.helper2', { ns: 'dataset' })}</span>
+                <span className="text-text-secondary system-sm-medium">{t('connectHelper.helper2', { ns: 'dataset' })}</span>
                 <span>{t('connectHelper.helper3', { ns: 'dataset' })}</span>
-                <a className="system-sm-regular self-stretch text-text-accent" href={docLink('/use-dify/knowledge/connect-external-knowledge-base')} target="_blank" rel="noopener noreferrer">
+                <a className="self-stretch text-text-accent system-sm-regular" href={docLink('/use-dify/knowledge/connect-external-knowledge-base')} target="_blank" rel="noopener noreferrer">
                   {t('connectHelper.helper4', { ns: 'dataset' })}
                 </a>
                 <span>
@@ -108,7 +108,7 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
             />
             <div className="flex items-center justify-end gap-2 self-stretch py-2">
               <Button variant="secondary" onClick={navBackHandle}>
-                <div className="system-sm-medium text-components-button-secondary-text">{t('externalKnowledgeForm.cancel', { ns: 'dataset' })}</div>
+                <div className="text-components-button-secondary-text system-sm-medium">{t('externalKnowledgeForm.cancel', { ns: 'dataset' })}</div>
               </Button>
               <Button
                 variant="primary"
@@ -118,7 +118,7 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
                 disabled={!isFormValid}
                 loading={loading}
               >
-                <div className="system-sm-medium text-components-button-primary-text">{t('externalKnowledgeForm.connect', { ns: 'dataset' })}</div>
+                <div className="text-components-button-primary-text system-sm-medium">{t('externalKnowledgeForm.connect', { ns: 'dataset' })}</div>
                 <RiArrowRightLine className="h-4 w-4 text-components-button-primary-text" />
               </Button>
             </div>
diff --git a/web/app/components/datasets/extra-info/__tests__/index.spec.tsx b/web/app/components/datasets/extra-info/__tests__/index.spec.tsx
index 4a8d89e9fb..de61894a11 100644
--- a/web/app/components/datasets/extra-info/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/extra-info/__tests__/index.spec.tsx
@@ -13,7 +13,7 @@ import Statistics from '../statistics'
 
 // Mock Setup
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: vi.fn(),
     replace: vi.fn(),
@@ -23,7 +23,7 @@ vi.mock('next/navigation', () => ({
 }))
 
 // Mock next/link
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, ...props }: { children: React.ReactNode, href: string, [key: string]: unknown }) => (
     <a href={href} {...props}>{children}</a>
   ),
diff --git a/web/app/components/datasets/extra-info/api-access/card.tsx b/web/app/components/datasets/extra-info/api-access/card.tsx
index 946536bf2c..cdb1a7a98f 100644
--- a/web/app/components/datasets/extra-info/api-access/card.tsx
+++ b/web/app/components/datasets/extra-info/api-access/card.tsx
@@ -1,5 +1,4 @@
 import { RiArrowRightUpLine, RiBookOpenLine } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,6 +7,7 @@ import Indicator from '@/app/components/header/indicator'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
+import Link from '@/next/link'
 import { useDisableDatasetServiceApi, useEnableDatasetServiceApi } from '@/service/knowledge/use-dataset'
 import { cn } from '@/utils/classnames'
 
@@ -65,7 +65,7 @@ const Card = ({
               disabled={!isCurrentWorkspaceManager}
             />
           </div>
-          <div className="system-xs-regular text-text-tertiary">
+          <div className="text-text-tertiary system-xs-regular">
             {t('appMenus.apiAccessTip', { ns: 'common' })}
           </div>
         </div>
@@ -79,7 +79,7 @@ const Card = ({
           className="flex h-8 items-center space-x-[7px] rounded-lg px-2 text-text-tertiary hover:bg-state-base-hover"
         >
           <RiBookOpenLine className="size-3.5 shrink-0" />
-          <div className="system-sm-regular grow truncate">
+          <div className="grow truncate system-sm-regular">
             {t('overview.apiInfo.doc', { ns: 'appOverview' })}
           </div>
           <RiArrowRightUpLine className="size-3.5 shrink-0" />
diff --git a/web/app/components/datasets/extra-info/service-api/__tests__/index.spec.tsx b/web/app/components/datasets/extra-info/service-api/__tests__/index.spec.tsx
index b94508de6a..8137052383 100644
--- a/web/app/components/datasets/extra-info/service-api/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/extra-info/service-api/__tests__/index.spec.tsx
@@ -9,7 +9,7 @@ import ServiceApi from '../index'
 
 // Mock Setup
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: vi.fn(),
     replace: vi.fn(),
@@ -19,7 +19,7 @@ vi.mock('next/navigation', () => ({
 }))
 
 // Mock next/link
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, ...props }: { children: React.ReactNode, href: string, [key: string]: unknown }) => (
     <a href={href} {...props}>{children}</a>
   ),
diff --git a/web/app/components/datasets/extra-info/service-api/card.tsx b/web/app/components/datasets/extra-info/service-api/card.tsx
index 31076d12fc..71719491e3 100644
--- a/web/app/components/datasets/extra-info/service-api/card.tsx
+++ b/web/app/components/datasets/extra-info/service-api/card.tsx
@@ -1,5 +1,4 @@
 import { RiBookOpenLine, RiKey2Line } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +8,7 @@ import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
 import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
 import Indicator from '@/app/components/header/indicator'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
+import Link from '@/next/link'
 
 type CardProps = {
   apiBaseUrl: string
@@ -38,7 +38,7 @@ const Card = ({
             <div className="flex size-6 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 shadow-md shadow-shadow-shadow-5">
               <ApiAggregate className="size-4 text-text-primary-on-surface" />
             </div>
-            <div className="system-sm-semibold grow truncate text-text-secondary">
+            <div className="grow truncate text-text-secondary system-sm-semibold">
               {t('serviceApi.card.title', { ns: 'dataset' })}
             </div>
           </div>
@@ -50,19 +50,19 @@ const Card = ({
               }
             />
             <div
-              className="system-xs-semibold-uppercase text-text-success"
+              className="text-text-success system-xs-semibold-uppercase"
             >
               {t('serviceApi.enabled', { ns: 'dataset' })}
             </div>
           </div>
         </div>
         <div className="flex flex-col">
-          <div className="system-xs-regular leading-6 text-text-tertiary">
+          <div className="leading-6 text-text-tertiary system-xs-regular">
             {t('serviceApi.card.endpoint', { ns: 'dataset' })}
           </div>
           <div className="flex h-8 items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
             <div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
-              <div className="system-xs-medium truncate text-text-secondary">
+              <div className="truncate text-text-secondary system-xs-medium">
                 {apiBaseUrl}
               </div>
             </div>
@@ -81,7 +81,7 @@ const Card = ({
           onClick={handleOpenSecretKeyModal}
         >
           <RiKey2Line className="size-3.5 shrink-0" />
-          <span className="system-xs-medium px-[3px]">
+          <span className="px-[3px] system-xs-medium">
             {t('serviceApi.card.apiKey', { ns: 'dataset' })}
           </span>
         </Button>
@@ -96,7 +96,7 @@ const Card = ({
             className="gap-x-px text-text-tertiary"
           >
             <RiBookOpenLine className="size-3.5 shrink-0" />
-            <span className="system-xs-medium px-[3px]">
+            <span className="px-[3px] system-xs-medium">
               {t('serviceApi.card.apiReference', { ns: 'dataset' })}
             </span>
           </Button>
diff --git a/web/app/components/datasets/hit-testing/__tests__/index.spec.tsx b/web/app/components/datasets/hit-testing/__tests__/index.spec.tsx
index fe7510b498..2dda6ecaae 100644
--- a/web/app/components/datasets/hit-testing/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/hit-testing/__tests__/index.spec.tsx
@@ -27,7 +27,7 @@ vi.mock('@/app/components/datasets/external-knowledge-base/create/RetrievalSetti
 
 // Mock Setup
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: vi.fn(),
     replace: vi.fn(),
diff --git a/web/app/components/datasets/hit-testing/components/query-input/index.tsx b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
index b634859dcf..0435d0a04d 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/index.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
@@ -14,7 +14,6 @@ import {
   RiEqualizer2Line,
   RiPlayCircleLine,
 } from '@remixicon/react'
-import Image from 'next/image'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -24,6 +23,7 @@ import ImageUploaderInRetrievalTesting from '@/app/components/datasets/common/im
 import { getIcon } from '@/app/components/datasets/common/retrieval-method-info'
 import ModifyExternalRetrievalModal from '@/app/components/datasets/hit-testing/modify-external-retrieval-modal'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import Image from '@/next/image'
 import { RETRIEVE_METHOD } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import Textarea from './textarea'
@@ -206,7 +206,7 @@ const QueryInput = ({
     <div className={cn('relative flex h-80 shrink-0 flex-col overflow-hidden rounded-xl bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-0.5 shadow-xs')}>
       <div className="flex h-full flex-col overflow-hidden rounded-[10px] bg-background-section-burn">
         <div className="relative flex shrink-0 items-center justify-between p-1.5 pb-1 pl-3">
-          <span className="system-sm-semibold-uppercase text-text-secondary">
+          <span className="text-text-secondary system-sm-semibold-uppercase">
             {t('input.title', { ns: 'datasetHitTesting' })}
           </span>
           {isExternal
@@ -218,7 +218,7 @@ const QueryInput = ({
                 >
                   <RiEqualizer2Line className="h-3.5 w-3.5 text-components-button-secondary-text" />
                   <div className="flex items-center justify-center gap-1 px-[3px]">
-                    <span className="system-xs-medium text-components-button-secondary-text">{t('settingTitle', { ns: 'datasetHitTesting' })}</span>
+                    <span className="text-components-button-secondary-text system-xs-medium">{t('settingTitle', { ns: 'datasetHitTesting' })}</span>
                   </div>
                 </Button>
               )
diff --git a/web/app/components/datasets/list/__tests__/datasets.spec.tsx b/web/app/components/datasets/list/__tests__/datasets.spec.tsx
index 49bda88c8b..5b777e0b2e 100644
--- a/web/app/components/datasets/list/__tests__/datasets.spec.tsx
+++ b/web/app/components/datasets/list/__tests__/datasets.spec.tsx
@@ -6,7 +6,7 @@ import { ChunkingMode, DatasetPermission, DataSourceType } from '@/models/datase
 import { RETRIEVE_METHOD } from '@/types/app'
 import Datasets from '../datasets'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
 }))
 
diff --git a/web/app/components/datasets/list/__tests__/index.spec.tsx b/web/app/components/datasets/list/__tests__/index.spec.tsx
index 73e0ba0960..37a787ff51 100644
--- a/web/app/components/datasets/list/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/list/__tests__/index.spec.tsx
@@ -4,7 +4,7 @@ import List from '../index'
 
 const mockPush = vi.fn()
 const mockReplace = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
     replace: mockReplace,
diff --git a/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx b/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx
index ebe80e4686..21ddda5ce6 100644
--- a/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx
@@ -22,7 +22,7 @@ vi.mock('@/hooks/use-format-time-from-now', () => ({
 
 const mockPush = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mockPush }),
 }))
 
diff --git a/web/app/components/datasets/list/dataset-card/index.tsx b/web/app/components/datasets/list/dataset-card/index.tsx
index 85dba7e8ff..2a22255eda 100644
--- a/web/app/components/datasets/list/dataset-card/index.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { DataSet } from '@/models/datasets'
 import { useHover } from 'ahooks'
-import { useRouter } from 'next/navigation'
 import { useMemo, useRef } from 'react'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
+import { useRouter } from '@/next/navigation'
 import CornerLabels from './components/corner-labels'
 import DatasetCardFooter from './components/dataset-card-footer'
 import DatasetCardHeader from './components/dataset-card-header'
diff --git a/web/app/components/datasets/list/new-dataset-card/option.tsx b/web/app/components/datasets/list/new-dataset-card/option.tsx
index e862b5c11e..b9a1d2f8ff 100644
--- a/web/app/components/datasets/list/new-dataset-card/option.tsx
+++ b/web/app/components/datasets/list/new-dataset-card/option.tsx
@@ -1,5 +1,5 @@
-import Link from 'next/link'
 import * as React from 'react'
+import Link from '@/next/link'
 
 type OptionProps = {
   Icon: React.ComponentType<{ className?: string }>
@@ -19,7 +19,7 @@ const Option = ({
       href={href}
     >
       <Icon className="h-4 w-4 shrink-0" />
-      <span className="system-sm-medium grow text-left">{text}</span>
+      <span className="grow text-left system-sm-medium">{text}</span>
     </Link>
   )
 }
diff --git a/web/app/components/datasets/metadata/metadata-document/__tests__/index.spec.tsx b/web/app/components/datasets/metadata/metadata-document/__tests__/index.spec.tsx
index e56fe46422..9cc4f89bd8 100644
--- a/web/app/components/datasets/metadata/metadata-document/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/__tests__/index.spec.tsx
@@ -45,7 +45,7 @@ vi.mock('../../hooks/use-check-metadata-name', () => ({
   }),
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: vi.fn(),
   }),
diff --git a/web/app/components/datasets/metadata/metadata-document/__tests__/info-group.spec.tsx b/web/app/components/datasets/metadata/metadata-document/__tests__/info-group.spec.tsx
index f30e188cd7..d783b882a8 100644
--- a/web/app/components/datasets/metadata/metadata-document/__tests__/info-group.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/__tests__/info-group.spec.tsx
@@ -22,7 +22,7 @@ type InputCombinedProps = {
   type: DataType
 }
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: vi.fn(),
   }),
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
index 6d172c92f4..5b848743c0 100644
--- a/web/app/components/datasets/metadata/metadata-document/info-group.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
@@ -2,12 +2,12 @@
 import type { FC } from 'react'
 import type { MetadataItemWithValue } from '../types'
 import { RiDeleteBinLine, RiQuestionLine } from '@remixicon/react'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
 import useTimestamp from '@/hooks/use-timestamp'
+import { useRouter } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 import AddMetadataButton from '../add-metadata-button'
 import InputCombined from '../edit-metadata-batch/input-combined'
@@ -85,7 +85,7 @@ const InfoGroup: FC<Props> = ({
               onSave={data => onAdd?.(data)}
               onManage={handleMangeMetadata}
             />
-            {list.length > 0 && <Divider className="my-3 " bgStyle="gradient" />}
+            {list.length > 0 && <Divider className="my-3" bgStyle="gradient" />}
           </div>
         )}
         {list.map((item, i) => (
@@ -99,12 +99,12 @@ const InfoGroup: FC<Props> = ({
                       value={item.value}
                       onChange={value => onChange?.({ ...item, value })}
                     />
-                    <div className="shrink-0 cursor-pointer rounded-md p-1  text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive">
+                    <div className="shrink-0 cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive">
                       <RiDeleteBinLine className="size-4" onClick={() => onDelete?.(item)} />
                     </div>
                   </div>
                 )
-              : (<div className="system-xs-regular py-1 text-text-secondary">{(item.value && item.type === DataType.time) ? formatTimestamp((item.value as number), t('metadata.dateTimeFormat', { ns: 'datasetDocuments' })) : item.value}</div>)}
+              : (<div className="py-1 text-text-secondary system-xs-regular">{(item.value && item.type === DataType.time) ? formatTimestamp((item.value as number), t('metadata.dateTimeFormat', { ns: 'datasetDocuments' })) : item.value}</div>)}
           </Field>
         ))}
       </div>
diff --git a/web/app/components/devtools/react-grab/loader.tsx b/web/app/components/devtools/react-grab/loader.tsx
index 3a1ecc6be8..4ee9ad1236 100644
--- a/web/app/components/devtools/react-grab/loader.tsx
+++ b/web/app/components/devtools/react-grab/loader.tsx
@@ -1,5 +1,5 @@
-import Script from 'next/script'
 import { IS_DEV } from '@/config'
+import Script from '@/next/script'
 
 export function ReactGrabLoader() {
   if (!IS_DEV)
diff --git a/web/app/components/devtools/react-scan/loader.tsx b/web/app/components/devtools/react-scan/loader.tsx
index a5956d7825..8e933c2b24 100644
--- a/web/app/components/devtools/react-scan/loader.tsx
+++ b/web/app/components/devtools/react-scan/loader.tsx
@@ -1,5 +1,5 @@
-import Script from 'next/script'
 import { IS_DEV } from '@/config'
+import Script from '@/next/script'
 
 export function ReactScanLoader() {
   if (!IS_DEV)
diff --git a/web/app/components/explore/__tests__/index.spec.tsx b/web/app/components/explore/__tests__/index.spec.tsx
index cf76593613..5c743928e8 100644
--- a/web/app/components/explore/__tests__/index.spec.tsx
+++ b/web/app/components/explore/__tests__/index.spec.tsx
@@ -8,7 +8,7 @@ const mockReplace = vi.fn()
 const mockPush = vi.fn()
 const mockInstalledAppsData = { installed_apps: [] as const }
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: mockReplace,
     push: mockPush,
diff --git a/web/app/components/explore/create-app-modal/__tests__/index.spec.tsx b/web/app/components/explore/create-app-modal/__tests__/index.spec.tsx
index 62353fb3c1..f389eeab29 100644
--- a/web/app/components/explore/create-app-modal/__tests__/index.spec.tsx
+++ b/web/app/components/explore/create-app-modal/__tests__/index.spec.tsx
@@ -19,7 +19,7 @@ vi.mock('@emoji-mart/data', () => ({
   },
 }))
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({}),
 }))
 
diff --git a/web/app/components/explore/sidebar/__tests__/index.spec.tsx b/web/app/components/explore/sidebar/__tests__/index.spec.tsx
index 36e6ab217c..26c065a10c 100644
--- a/web/app/components/explore/sidebar/__tests__/index.spec.tsx
+++ b/web/app/components/explore/sidebar/__tests__/index.spec.tsx
@@ -13,7 +13,7 @@ let mockIsPending = false
 let mockInstalledApps: InstalledApp[] = []
 let mockMediaType: string = MediaType.pc
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegments: () => mockSegments,
   useRouter: () => ({
     push: mockPush,
diff --git a/web/app/components/explore/sidebar/app-nav-item/__tests__/index.spec.tsx b/web/app/components/explore/sidebar/app-nav-item/__tests__/index.spec.tsx
index 299c181c98..26af458c55 100644
--- a/web/app/components/explore/sidebar/app-nav-item/__tests__/index.spec.tsx
+++ b/web/app/components/explore/sidebar/app-nav-item/__tests__/index.spec.tsx
@@ -3,7 +3,7 @@ import AppNavItem from '../index'
 
 const mockPush = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
   }),
diff --git a/web/app/components/explore/sidebar/app-nav-item/index.tsx b/web/app/components/explore/sidebar/app-nav-item/index.tsx
index 08558578f6..71aacbacb2 100644
--- a/web/app/components/explore/sidebar/app-nav-item/index.tsx
+++ b/web/app/components/explore/sidebar/app-nav-item/index.tsx
@@ -2,11 +2,11 @@
 import type { AppIconType } from '@/types/app'
 
 import { useHover } from 'ahooks'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useRef } from 'react'
 import AppIcon from '@/app/components/base/app-icon'
 import ItemOperation from '@/app/components/explore/item-operation'
+import { useRouter } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 
 export type IAppNavItemProps = {
@@ -46,7 +46,7 @@ export default function AppNavItem({
     <div
       ref={ref}
       key={id}
-      className={cn('system-sm-medium flex h-8 items-center justify-between rounded-lg px-2 text-sm font-normal text-components-menu-item-text mobile:justify-center mobile:px-1', isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover')}
+      className={cn('flex h-8 items-center justify-between rounded-lg px-2 text-sm font-normal text-components-menu-item-text system-sm-medium mobile:justify-center mobile:px-1', isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover')}
       onClick={() => {
         router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
       }}
@@ -56,7 +56,7 @@ export default function AppNavItem({
         <>
           <div className="flex w-0 grow items-center space-x-2">
             <AppIcon size="tiny" iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />
-            <div className="system-sm-regular truncate text-components-menu-item-text" title={name}>{name}</div>
+            <div className="truncate text-components-menu-item-text system-sm-regular" title={name}>{name}</div>
           </div>
           <div className="h-6 shrink-0" onClick={e => e.stopPropagation()}>
             <ItemOperation
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index bafc745b01..4b328bb46d 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 import { useBoolean } from 'ahooks'
-import Link from 'next/link'
-import { useSelectedLayoutSegments } from 'next/navigation'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import Link from '@/next/link'
+import { useSelectedLayoutSegments } from '@/next/navigation'
 import { useGetInstalledApps, useUninstallApp, useUpdateAppPinStatus } from '@/service/use-explore'
 import { cn } from '@/utils/classnames'
 import Toast from '../../base/toast'
diff --git a/web/app/components/explore/try-app/app-info/__tests__/index.spec.tsx b/web/app/components/explore/try-app/app-info/__tests__/index.spec.tsx
index f0c6a9c61e..432b3da48d 100644
--- a/web/app/components/explore/try-app/app-info/__tests__/index.spec.tsx
+++ b/web/app/components/explore/try-app/app-info/__tests__/index.spec.tsx
@@ -11,7 +11,7 @@ vi.mock('../use-get-requirements', () => ({
   default: (...args: unknown[]) => mockUseGetRequirements(...args),
 }))
 
-vi.mock('next/image', () => ({
+vi.mock('@/next/image', () => ({
   default: ({
     src,
     alt,
diff --git a/web/app/components/explore/try-app/app-info/index.tsx b/web/app/components/explore/try-app/app-info/index.tsx
index 3ab82871d3..c832a33a01 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { TryAppInfo } from '@/service/try-app'
-import Image from 'next/image'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
 import Button from '@/app/components/base/button'
+import Image from '@/next/image'
 import { cn } from '@/utils/classnames'
 import useGetRequirements from './use-get-requirements'
 
diff --git a/web/app/components/goto-anything/__tests__/command-selector.spec.tsx b/web/app/components/goto-anything/__tests__/command-selector.spec.tsx
index 56e40a71f0..98c6ac784f 100644
--- a/web/app/components/goto-anything/__tests__/command-selector.spec.tsx
+++ b/web/app/components/goto-anything/__tests__/command-selector.spec.tsx
@@ -5,7 +5,7 @@ import { Command } from 'cmdk'
 import * as React from 'react'
 import CommandSelector from '../command-selector'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: () => '/app',
 }))
 
diff --git a/web/app/components/goto-anything/__tests__/context.spec.tsx b/web/app/components/goto-anything/__tests__/context.spec.tsx
index c427f76c61..70a30786df 100644
--- a/web/app/components/goto-anything/__tests__/context.spec.tsx
+++ b/web/app/components/goto-anything/__tests__/context.spec.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { GotoAnythingProvider, useGotoAnythingContext } from '../context'
 
 let pathnameMock: string | null | undefined = '/'
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: () => pathnameMock,
 }))
 
diff --git a/web/app/components/goto-anything/__tests__/index.spec.tsx b/web/app/components/goto-anything/__tests__/index.spec.tsx
index eb5fa8ccdd..b2050ef9fb 100644
--- a/web/app/components/goto-anything/__tests__/index.spec.tsx
+++ b/web/app/components/goto-anything/__tests__/index.spec.tsx
@@ -11,7 +11,7 @@ type TestSearchResult = Omit<SearchResult, 'icon' | 'data'> & {
 }
 
 const routerPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: routerPush,
   }),
diff --git a/web/app/components/goto-anything/command-selector.tsx b/web/app/components/goto-anything/command-selector.tsx
index bdb641cae6..59373c9e3a 100644
--- a/web/app/components/goto-anything/command-selector.tsx
+++ b/web/app/components/goto-anything/command-selector.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { ActionItem } from './actions/types'
 import { Command } from 'cmdk'
-import { usePathname } from 'next/navigation'
 import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { usePathname } from '@/next/navigation'
 import { slashCommandRegistry } from './actions/commands/registry'
 
 type Props = {
diff --git a/web/app/components/goto-anything/context.tsx b/web/app/components/goto-anything/context.tsx
index 5c2bf3cb6b..28fb08ac17 100644
--- a/web/app/components/goto-anything/context.tsx
+++ b/web/app/components/goto-anything/context.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { createContext, useContext, useEffect, useState } from 'react'
+import { usePathname } from '@/next/navigation'
 import { isInWorkflowPage } from '../workflow/constants'
 
 /**
diff --git a/web/app/components/goto-anything/hooks/__tests__/use-goto-anything-navigation.spec.ts b/web/app/components/goto-anything/hooks/__tests__/use-goto-anything-navigation.spec.ts
index 1ac3bbc17c..c8a6a4a13c 100644
--- a/web/app/components/goto-anything/hooks/__tests__/use-goto-anything-navigation.spec.ts
+++ b/web/app/components/goto-anything/hooks/__tests__/use-goto-anything-navigation.spec.ts
@@ -16,7 +16,7 @@ type MockCommandResult = {
 
 let mockFindCommandResult: MockCommandResult = null
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockRouterPush,
   }),
diff --git a/web/app/components/goto-anything/hooks/use-goto-anything-navigation.ts b/web/app/components/goto-anything/hooks/use-goto-anything-navigation.ts
index 73be6cd3ee..9c9871fa1d 100644
--- a/web/app/components/goto-anything/hooks/use-goto-anything-navigation.ts
+++ b/web/app/components/goto-anything/hooks/use-goto-anything-navigation.ts
@@ -3,9 +3,9 @@
 import type { RefObject } from 'react'
 import type { Plugin } from '../../plugins/types'
 import type { ActionItem, SearchResult } from '../actions/types'
-import { useRouter } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { selectWorkflowNode } from '@/app/components/workflow/utils/node-navigation'
+import { useRouter } from '@/next/navigation'
 import { slashCommandRegistry } from '../actions/commands/registry'
 
 export type UseGotoAnythingNavigationReturn = {
diff --git a/web/app/components/header/account-about/index.tsx b/web/app/components/header/account-about/index.tsx
index b80cbb8f03..09ab89fc88 100644
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -2,15 +2,15 @@
 import type { LangGeniusVersionResponse } from '@/models/common'
 import { RiCloseLine } from '@remixicon/react'
 import dayjs from 'dayjs'
-import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import Modal from '@/app/components/base/modal'
 import { IS_CE_EDITION } from '@/config'
-
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
+import Link from '@/next/link'
+
 type IAccountSettingProps = {
   langGeniusVersionInfo: LangGeniusVersionResponse
   onCancel: () => void
diff --git a/web/app/components/header/account-dropdown/index.spec.tsx b/web/app/components/header/account-dropdown/index.spec.tsx
index e33d89fa95..2fd98777b3 100644
--- a/web/app/components/header/account-dropdown/index.spec.tsx
+++ b/web/app/components/header/account-dropdown/index.spec.tsx
@@ -3,12 +3,12 @@ import type { ModalContextState } from '@/context/modal-context'
 import type { ProviderContextState } from '@/context/provider-context'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { useRouter } from 'next/navigation'
 import { Plan } from '@/app/components/billing/type'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
+import { useRouter } from '@/next/navigation'
 import { useLogout } from '@/service/use-common'
 import AppSelector from './index'
 
@@ -53,8 +53,8 @@ vi.mock('@/service/use-common', () => ({
   useLogout: vi.fn(),
 }))
 
-vi.mock('next/navigation', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('next/navigation')>()
+vi.mock('@/next/navigation', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/next/navigation')>()
   return {
     ...actual,
     useRouter: vi.fn(),
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index 0a5779839e..1697433ac4 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -1,8 +1,6 @@
 'use client'
 
 import type { MouseEventHandler, ReactNode } from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { resetUser } from '@/app/components/base/amplitude/utils'
@@ -18,6 +16,8 @@ import { useDocLink } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { env } from '@/env'
+import Link from '@/next/link'
+import { useRouter } from '@/next/navigation'
 import { useLogout } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
 import AccountAbout from '../account-about'
diff --git a/web/app/components/header/account-setting/Integrations-page/index.tsx b/web/app/components/header/account-setting/Integrations-page/index.tsx
index ef234b5db7..29d0d9fcd3 100644
--- a/web/app/components/header/account-setting/Integrations-page/index.tsx
+++ b/web/app/components/header/account-setting/Integrations-page/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 import { useAccountIntegrates } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
 import s from './index.module.css'
diff --git a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.spec.tsx b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.spec.tsx
index 5a58d9872b..79ef69b945 100644
--- a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.spec.tsx
@@ -16,7 +16,7 @@ vi.mock('next-themes', () => ({
   useTheme: vi.fn(),
 }))
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href }: { children: React.ReactNode, href: string }) => (
     <a href={href} data-testid="mock-link">{children}</a>
   ),
diff --git a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
index f02e276f55..80bc00e5cb 100644
--- a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
@@ -4,7 +4,6 @@ import {
   RiArrowRightUpLine,
 } from '@remixicon/react'
 import { useTheme } from 'next-themes'
-import Link from 'next/link'
 import {
   memo,
   useCallback,
@@ -15,6 +14,7 @@ import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
 import List from '@/app/components/plugins/marketplace/list'
 import ProviderCard from '@/app/components/plugins/provider-card'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
@@ -48,13 +48,13 @@ const InstallFromMarketplace = ({
     <div className="mb-2">
       <Divider className="!mt-4 h-px" />
       <div className="flex items-center justify-between">
-        <div className="system-md-semibold flex cursor-pointer items-center gap-1 text-text-primary" onClick={() => setCollapse(!collapse)}>
+        <div className="flex cursor-pointer items-center gap-1 text-text-primary system-md-semibold" onClick={() => setCollapse(!collapse)}>
           <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} />
           {t('modelProvider.installDataSourceProvider', { ns: 'common' })}
         </div>
         <div className="mb-2 flex items-center pt-2">
-          <span className="system-sm-regular pr-1 text-text-tertiary">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
-          <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="system-sm-medium inline-flex items-center text-text-accent">
+          <span className="pr-1 text-text-tertiary system-sm-regular">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
+          <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="inline-flex items-center text-text-accent system-sm-medium">
             {t('marketplace.difyMarketplace', { ns: 'plugin' })}
             <RiArrowRightUpLine className="h-4 w-4" />
           </Link>
diff --git a/web/app/components/header/account-setting/index.spec.tsx b/web/app/components/header/account-setting/index.spec.tsx
index 3a98d8afb8..e2f94d306f 100644
--- a/web/app/components/header/account-setting/index.spec.tsx
+++ b/web/app/components/header/account-setting/index.spec.tsx
@@ -23,7 +23,7 @@ vi.mock('@/context/app-context', async (importOriginal) => {
   }
 })
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(() => ({
     push: vi.fn(),
     replace: vi.fn(),
diff --git a/web/app/components/header/account-setting/language-page/index.spec.tsx b/web/app/components/header/account-setting/language-page/index.spec.tsx
index 1748987570..1dd983d1a0 100644
--- a/web/app/components/header/account-setting/language-page/index.spec.tsx
+++ b/web/app/components/header/account-setting/language-page/index.spec.tsx
@@ -61,7 +61,7 @@ vi.mock('@/app/components/base/select', async () => {
   }
 })
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ refresh: mockRefresh }),
 }))
 
diff --git a/web/app/components/header/account-setting/language-page/index.tsx b/web/app/components/header/account-setting/language-page/index.tsx
index 5751e88285..6c84a25428 100644
--- a/web/app/components/header/account-setting/language-page/index.tsx
+++ b/web/app/components/header/account-setting/language-page/index.tsx
@@ -2,7 +2,6 @@
 
 import type { Item } from '@/app/components/base/select'
 import type { Locale } from '@/i18n-config'
-import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -12,6 +11,7 @@ import { useAppContext } from '@/context/app-context'
 import { useLocale } from '@/context/i18n'
 import { setLocaleOnClient } from '@/i18n-config'
 import { languages } from '@/i18n-config/language'
+import { useRouter } from '@/next/navigation'
 import { updateUserProfile } from '@/service/common'
 import { timezones } from '@/utils/timezone'
 
diff --git a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.spec.tsx b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.spec.tsx
index e15e082045..bfabe1b39e 100644
--- a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.spec.tsx
@@ -7,7 +7,7 @@ import { useMarketplaceAllPlugins } from './hooks'
 import InstallFromMarketplace from './install-from-marketplace'
 
 // Mock dependencies
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href }: { children: React.ReactNode, href: string }) => <a href={href}>{children}</a>,
 }))
 
diff --git a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
index 289146f2d2..8802dd6c60 100644
--- a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
@@ -7,13 +7,13 @@ import {
   RiArrowRightUpLine,
 } from '@remixicon/react'
 import { useTheme } from 'next-themes'
-import Link from 'next/link'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
 import List from '@/app/components/plugins/marketplace/list'
 import ProviderCard from '@/app/components/plugins/provider-card'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
@@ -47,13 +47,13 @@ const InstallFromMarketplace = ({
     <div className="mb-2">
       <Divider className="!mt-4 h-px" />
       <div className="flex items-center justify-between">
-        <div className="system-md-semibold flex cursor-pointer items-center gap-1 text-text-primary" onClick={() => setCollapse(!collapse)}>
+        <div className="flex cursor-pointer items-center gap-1 text-text-primary system-md-semibold" onClick={() => setCollapse(!collapse)}>
           <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} />
           {t('modelProvider.installProvider', { ns: 'common' })}
         </div>
         <div className="mb-2 flex items-center pt-2">
-          <span className="system-sm-regular pr-1 text-text-tertiary">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
-          <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="system-sm-medium inline-flex items-center text-text-accent">
+          <span className="pr-1 text-text-tertiary system-sm-regular">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
+          <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="inline-flex items-center text-text-accent system-sm-medium">
             {t('marketplace.difyMarketplace', { ns: 'plugin' })}
             <RiArrowRightUpLine className="h-4 w-4" />
           </Link>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.spec.tsx
index 66db50d976..efaf43998a 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.spec.tsx
@@ -30,9 +30,9 @@ describe('Input', () => {
       />,
     )
 
-    fireEvent.change(screen.getByPlaceholderText('API Key'), { target: { value: 'next' } })
+    fireEvent.change(screen.getByPlaceholderText('API Key'), { target: { value: '@/next' } })
 
-    expect(onChange).toHaveBeenCalledWith('next')
+    expect(onChange).toHaveBeenCalledWith('@/next')
   })
 
   // Edge cases: min/max enforcement
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
index e9780680e2..454bccfc59 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
@@ -1,7 +1,7 @@
 import { RiErrorWarningFill } from '@remixicon/react'
-import Link from 'next/link'
 import Tooltip from '@/app/components/base/tooltip'
 import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
+import Link from '@/next/link'
 import { useInstalledPluginList } from '@/service/use-plugins'
 
 type StatusIndicatorsProps = {
@@ -18,14 +18,14 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
   const renderTooltipContent = (title: string, description?: string, linkText?: string, linkHref?: string) => {
     return (
       <div className="flex w-[240px] max-w-[240px] flex-col gap-1 px-1 py-1.5" onClick={e => e.stopPropagation()}>
-        <div className="title-xs-semi-bold text-text-primary">{title}</div>
+        <div className="text-text-primary title-xs-semi-bold">{title}</div>
         {description && (
-          <div className="body-xs-regular min-w-[200px] text-text-secondary">
+          <div className="min-w-[200px] text-text-secondary body-xs-regular">
             {description}
           </div>
         )}
         {linkText && linkHref && (
-          <div className="body-xs-regular z-[100] cursor-pointer text-text-accent">
+          <div className="z-[100] cursor-pointer text-text-accent body-xs-regular">
             <Link
               href={linkHref}
               onClick={(e) => {
diff --git a/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx b/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx
index fe8832e84b..201b598490 100644
--- a/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx
+++ b/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx
@@ -1,9 +1,9 @@
 import type { Form, ValidateValue } from '../key-validator/declarations'
 import type { PluginProvider } from '@/models/common'
-import Image from 'next/image'
 import { useTranslation } from 'react-i18next'
 import { useToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
+import Image from '@/next/image'
 import SerpapiLogo from '../../assets/serpapi.png'
 import KeyValidator from '../key-validator'
 import { updatePluginKey, validatePluginKey } from './utils'
diff --git a/web/app/components/header/account-setting/plugin-page/index.tsx b/web/app/components/header/account-setting/plugin-page/index.tsx
index beda55f2f2..a71c3ee072 100644
--- a/web/app/components/header/account-setting/plugin-page/index.tsx
+++ b/web/app/components/header/account-setting/plugin-page/index.tsx
@@ -1,7 +1,7 @@
 import type { PluginProvider } from '@/models/common'
 import { LockClosedIcon } from '@heroicons/react/24/solid'
-import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 import { usePluginProviders } from '@/service/use-common'
 import SerpapiPlugin from './SerpapiPlugin'
 
diff --git a/web/app/components/header/app-nav/index.spec.tsx b/web/app/components/header/app-nav/index.spec.tsx
index af0f99cb85..bfd8ed4787 100644
--- a/web/app/components/header/app-nav/index.spec.tsx
+++ b/web/app/components/header/app-nav/index.spec.tsx
@@ -1,13 +1,13 @@
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { useParams } from 'next/navigation'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useAppContext } from '@/context/app-context'
+import { useParams } from '@/next/navigation'
 import { useInfiniteAppList } from '@/service/use-apps'
 import { AppModeEnum } from '@/types/app'
 import AppNav from './index'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: vi.fn(),
 }))
 
diff --git a/web/app/components/header/app-nav/index.tsx b/web/app/components/header/app-nav/index.tsx
index 737dd96bab..214b7612bb 100644
--- a/web/app/components/header/app-nav/index.tsx
+++ b/web/app/components/header/app-nav/index.tsx
@@ -7,7 +7,6 @@ import {
 } from '@remixicon/react'
 import { flatten } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { useParams } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import CreateAppTemplateDialog from '@/app/components/app/create-app-dialog'
@@ -15,6 +14,7 @@ import CreateAppModal from '@/app/components/app/create-app-modal'
 import CreateFromDSLModal from '@/app/components/app/create-from-dsl-modal'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useAppContext } from '@/context/app-context'
+import { useParams } from '@/next/navigation'
 import { useInfiniteAppList } from '@/service/use-apps'
 import { AppModeEnum } from '@/types/app'
 import Nav from '../nav'
diff --git a/web/app/components/header/app-selector/index.spec.tsx b/web/app/components/header/app-selector/index.spec.tsx
index f301de4580..fea93728eb 100644
--- a/web/app/components/header/app-selector/index.spec.tsx
+++ b/web/app/components/header/app-selector/index.spec.tsx
@@ -1,12 +1,12 @@
 import type { AppDetailResponse } from '@/models/app'
 import { act, fireEvent, render, screen } from '@testing-library/react'
-import { useRouter } from 'next/navigation'
 import { vi } from 'vitest'
 import { useAppContext } from '@/context/app-context'
+import { useRouter } from '@/next/navigation'
 import AppSelector from './index'
 
 // Mock next/navigation
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(),
 }))
 
diff --git a/web/app/components/header/app-selector/index.tsx b/web/app/components/header/app-selector/index.tsx
index 13677ef7ab..89f87c2687 100644
--- a/web/app/components/header/app-selector/index.tsx
+++ b/web/app/components/header/app-selector/index.tsx
@@ -3,12 +3,12 @@ import type { AppDetailResponse } from '@/models/app'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid'
 import { noop } from 'es-toolkit/function'
-import { useRouter } from 'next/navigation'
 import { Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import CreateAppDialog from '@/app/components/app/create-app-dialog'
 import AppIcon from '@/app/components/base/app-icon'
 import { useAppContext } from '@/context/app-context'
+import { useRouter } from '@/next/navigation'
 import Indicator from '../indicator'
 
 type IAppSelectorProps = {
diff --git a/web/app/components/header/dataset-nav/index.spec.tsx b/web/app/components/header/dataset-nav/index.spec.tsx
index 8c1b5952a7..34f8c9ce3b 100644
--- a/web/app/components/header/dataset-nav/index.spec.tsx
+++ b/web/app/components/header/dataset-nav/index.spec.tsx
@@ -1,18 +1,18 @@
 import { act, fireEvent, render, screen, within } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useAppContext } from '@/context/app-context'
 import {
   useParams,
   useRouter,
   useSelectedLayoutSegment,
-} from 'next/navigation'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { useAppContext } from '@/context/app-context'
+} from '@/next/navigation'
 import {
   useDatasetDetail,
   useDatasetList,
 } from '@/service/knowledge/use-dataset'
 import DatasetNav from './index'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: vi.fn(),
   useRouter: vi.fn(),
   useSelectedLayoutSegment: vi.fn(),
diff --git a/web/app/components/header/dataset-nav/index.tsx b/web/app/components/header/dataset-nav/index.tsx
index c0e79128e9..0b39560884 100644
--- a/web/app/components/header/dataset-nav/index.tsx
+++ b/web/app/components/header/dataset-nav/index.tsx
@@ -7,9 +7,9 @@ import {
   RiBook2Line,
 } from '@remixicon/react'
 import { flatten } from 'es-toolkit/compat'
-import { useParams, useRouter } from 'next/navigation'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useParams, useRouter } from '@/next/navigation'
 import { useDatasetDetail, useDatasetList } from '@/service/knowledge/use-dataset'
 import { basePath } from '@/utils/var'
 import Nav from '../nav'
diff --git a/web/app/components/header/explore-nav/index.spec.tsx b/web/app/components/header/explore-nav/index.spec.tsx
index 65a3f88f5e..f3cb42faf8 100644
--- a/web/app/components/header/explore-nav/index.spec.tsx
+++ b/web/app/components/header/explore-nav/index.spec.tsx
@@ -1,9 +1,9 @@
 import type { Mock } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import { useSelectedLayoutSegment } from 'next/navigation'
+import { useSelectedLayoutSegment } from '@/next/navigation'
 import ExploreNav from './index'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegment: vi.fn(),
 }))
 
diff --git a/web/app/components/header/explore-nav/index.tsx b/web/app/components/header/explore-nav/index.tsx
index 34deb61fe7..9931690e83 100644
--- a/web/app/components/header/explore-nav/index.tsx
+++ b/web/app/components/header/explore-nav/index.tsx
@@ -4,9 +4,9 @@ import {
   RiPlanetFill,
   RiPlanetLine,
 } from '@remixicon/react'
-import Link from 'next/link'
-import { useSelectedLayoutSegment } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
+import { useSelectedLayoutSegment } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 
 type ExploreNavProps = {
diff --git a/web/app/components/header/header-wrapper.spec.tsx b/web/app/components/header/header-wrapper.spec.tsx
index 80ddb14965..d550531d72 100644
--- a/web/app/components/header/header-wrapper.spec.tsx
+++ b/web/app/components/header/header-wrapper.spec.tsx
@@ -1,10 +1,10 @@
 import { act, render, screen } from '@testing-library/react'
-import { usePathname } from 'next/navigation'
 import { vi } from 'vitest'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { usePathname } from '@/next/navigation'
 import HeaderWrapper from './header-wrapper'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   usePathname: vi.fn(),
 }))
 
diff --git a/web/app/components/header/header-wrapper.tsx b/web/app/components/header/header-wrapper.tsx
index 1b81c1152c..e140939976 100644
--- a/web/app/components/header/header-wrapper.tsx
+++ b/web/app/components/header/header-wrapper.tsx
@@ -1,8 +1,8 @@
 'use client'
-import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useState } from 'react'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { usePathname } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 import s from './index.module.css'
 
diff --git a/web/app/components/header/index.spec.tsx b/web/app/components/header/index.spec.tsx
index ea7fab8a8f..8a37225353 100644
--- a/web/app/components/header/index.spec.tsx
+++ b/web/app/components/header/index.spec.tsx
@@ -52,7 +52,7 @@ vi.mock('@/context/workspace-context-provider', () => ({
   WorkspaceProvider: ({ children }: { children?: React.ReactNode }) => children,
 }))
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href }: { children?: React.ReactNode, href?: string }) => <a href={href}>{children}</a>,
 }))
 
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index 64498a82f8..cc4dd9bb61 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -1,5 +1,4 @@
 'use client'
-import Link from 'next/link'
 import { useCallback } from 'react'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import WorkplaceSelector from '@/app/components/header/account-dropdown/workplace-selector'
@@ -10,6 +9,7 @@ import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { WorkspaceProvider } from '@/context/workspace-context-provider'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import Link from '@/next/link'
 import { Plan } from '../billing/type'
 import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
@@ -91,7 +91,7 @@ const Header = () => {
 
   return (
     <div className="flex h-[56px] items-center">
-      <div className="flex min-w-0 flex-[1]  items-center pl-3 pr-2 min-[1280px]:pr-3">
+      <div className="flex min-w-0 flex-[1] items-center pl-3 pr-2 min-[1280px]:pr-3">
         {renderLogo()}
         <div className="mx-1.5 shrink-0 font-light text-divider-deep">/</div>
         <WorkspaceProvider>
diff --git a/web/app/components/header/nav/index.spec.tsx b/web/app/components/header/nav/index.spec.tsx
index ab530a4a86..250a55f034 100644
--- a/web/app/components/header/nav/index.spec.tsx
+++ b/web/app/components/header/nav/index.spec.tsx
@@ -7,11 +7,11 @@ import {
   screen,
   waitFor,
 } from '@testing-library/react'
-import { useRouter, useSelectedLayoutSegment } from 'next/navigation'
 import * as React from 'react'
 import { vi } from 'vitest'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useAppContext } from '@/context/app-context'
+import { useRouter, useSelectedLayoutSegment } from '@/next/navigation'
 import { AppModeEnum } from '@/types/app'
 import Nav from './index'
 
@@ -69,7 +69,7 @@ vi.mock('@headlessui/react', () => {
 })
 
 // Mock next/navigation
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegment: vi.fn(),
   useRouter: vi.fn(),
 }))
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
index ca4498e4fb..1342bb1fa3 100644
--- a/web/app/components/header/nav/index.tsx
+++ b/web/app/components/header/nav/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 
 import type { INavSelectorProps } from './nav-selector'
-import Link from 'next/link'
-import { useSelectedLayoutSegment } from 'next/navigation'
 import * as React from 'react'
 import { useState } from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
+import Link from '@/next/link'
+import { useSelectedLayoutSegment } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 import NavSelector from './nav-selector'
 
diff --git a/web/app/components/header/nav/nav-selector/index.spec.tsx b/web/app/components/header/nav/nav-selector/index.spec.tsx
index d613d4bf73..58c50e90dc 100644
--- a/web/app/components/header/nav/nav-selector/index.spec.tsx
+++ b/web/app/components/header/nav/nav-selector/index.spec.tsx
@@ -1,11 +1,11 @@
 import type { INavSelectorProps, NavItem } from './index'
 import type { AppContextValue } from '@/context/app-context'
 import { act, fireEvent, render, screen } from '@testing-library/react'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { vi } from 'vitest'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useAppContext } from '@/context/app-context'
+import { useRouter } from '@/next/navigation'
 import { AppModeEnum } from '@/types/app'
 import NavSelector from './index'
 
@@ -63,7 +63,7 @@ vi.mock('@headlessui/react', () => {
 })
 
 // Mock next/navigation
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(),
 }))
 
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index e66837c06c..4f681e5b22 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -7,7 +7,6 @@ import {
   RiArrowRightSLine,
 } from '@remixicon/react'
 import { debounce } from 'es-toolkit/compat'
-import { useRouter } from 'next/navigation'
 import { Fragment, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -16,6 +15,7 @@ import AppIcon from '@/app/components/base/app-icon'
 import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
 import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
+import { useRouter } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 
 export type NavItem = {
@@ -119,7 +119,7 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
                 <div
                   onClick={() => onCreate('')}
                   className={cn(
-                    'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover ',
+                    'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover',
                   )}
                 >
                   <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] border-[0.5px] border-divider-regular bg-background-default">
diff --git a/web/app/components/header/plugins-nav/index.spec.tsx b/web/app/components/header/plugins-nav/index.spec.tsx
index f76f579aa9..89280f173f 100644
--- a/web/app/components/header/plugins-nav/index.spec.tsx
+++ b/web/app/components/header/plugins-nav/index.spec.tsx
@@ -1,11 +1,11 @@
 import type { Mock } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import { useSelectedLayoutSegment } from 'next/navigation'
 import { usePluginTaskStatus } from '@/app/components/plugins/plugin-page/plugin-tasks/hooks'
+import { useSelectedLayoutSegment } from '@/next/navigation'
 
 import PluginsNav from './index'
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegment: vi.fn(),
 }))
 
diff --git a/web/app/components/header/plugins-nav/index.tsx b/web/app/components/header/plugins-nav/index.tsx
index d806416b3b..893eb21675 100644
--- a/web/app/components/header/plugins-nav/index.tsx
+++ b/web/app/components/header/plugins-nav/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 
-import Link from 'next/link'
-import { useSelectedLayoutSegment } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import Indicator from '@/app/components/header/indicator'
 import { usePluginTaskStatus } from '@/app/components/plugins/plugin-page/plugin-tasks/hooks'
+import Link from '@/next/link'
+import { useSelectedLayoutSegment } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 import DownloadingIcon from './downloading-icon'
 
@@ -33,7 +33,7 @@ const PluginsNav = ({
       )}
     >
       <div
-        className={cn('system-sm-medium relative flex h-8 flex-row items-center justify-center gap-0.5 rounded-xl border border-transparent p-1.5', activated && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text shadow-md', !activated && 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', (isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle')}
+        className={cn('relative flex h-8 flex-row items-center justify-center gap-0.5 rounded-xl border border-transparent p-1.5 system-sm-medium', activated && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text shadow-md', !activated && 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', (isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle')}
       >
         {
           (isFailed || isInstallingWithError) && !activated && (
diff --git a/web/app/components/header/tools-nav/index.spec.tsx b/web/app/components/header/tools-nav/index.spec.tsx
index dadb55eac5..3661a575c0 100644
--- a/web/app/components/header/tools-nav/index.spec.tsx
+++ b/web/app/components/header/tools-nav/index.spec.tsx
@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import ToolsNav from './index'
 
 const mockUseSelectedLayoutSegment = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegment: () => mockUseSelectedLayoutSegment(),
 }))
 
diff --git a/web/app/components/header/tools-nav/index.tsx b/web/app/components/header/tools-nav/index.tsx
index c8f318a742..141b576a4c 100644
--- a/web/app/components/header/tools-nav/index.tsx
+++ b/web/app/components/header/tools-nav/index.tsx
@@ -4,9 +4,9 @@ import {
   RiHammerFill,
   RiHammerLine,
 } from '@remixicon/react'
-import Link from 'next/link'
-import { useSelectedLayoutSegment } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
+import { useSelectedLayoutSegment } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 
 type ToolsNavProps = {
diff --git a/web/app/components/plugins/base/__tests__/deprecation-notice.spec.tsx b/web/app/components/plugins/base/__tests__/deprecation-notice.spec.tsx
index 42616f3138..6b10e4c1f3 100644
--- a/web/app/components/plugins/base/__tests__/deprecation-notice.spec.tsx
+++ b/web/app/components/plugins/base/__tests__/deprecation-notice.spec.tsx
@@ -2,7 +2,7 @@ import { cleanup, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import DeprecationNotice from '../deprecation-notice'
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href }: { children: React.ReactNode, href: string }) => (
     <a data-testid="link" href={href}>{children}</a>
   ),
diff --git a/web/app/components/plugins/base/deprecation-notice.tsx b/web/app/components/plugins/base/deprecation-notice.tsx
index 01b37bc20c..5562047cca 100644
--- a/web/app/components/plugins/base/deprecation-notice.tsx
+++ b/web/app/components/plugins/base/deprecation-notice.tsx
@@ -2,10 +2,10 @@ import type { FC } from 'react'
 import { useTranslation } from '#i18n'
 import { RiAlertFill } from '@remixicon/react'
 import { camelCase } from 'es-toolkit/string'
-import Link from 'next/link'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { Trans } from 'react-i18next'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
 
 type DeprecationNoticeProps = {
@@ -66,7 +66,7 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
         <div className={cn('flex size-6 shrink-0 items-center justify-center', iconWrapperClassName)}>
           <RiAlertFill className="size-4 text-text-warning-secondary" />
         </div>
-        <div className={cn('system-xs-regular grow py-1 text-text-primary', textClassName)}>
+        <div className={cn('grow py-1 text-text-primary system-xs-regular', textClassName)}>
           {
             hasValidDeprecatedReason && alternativePluginId && (
               <Trans
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index b1664eee97..f51964e555 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -7,7 +7,6 @@ import type { FC } from 'react'
 import type { Node } from 'reactflow'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
-import Link from 'next/link'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -16,6 +15,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { CollectionType } from '@/app/components/tools/types'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
 import {
   ToolAuthorizationSection,
@@ -192,7 +192,7 @@ const ToolSelector: FC<Props> = ({
         )}
         >
           {/* Header */}
-          <div className="system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary">
+          <div className="px-4 pb-1 pt-3.5 text-text-primary system-xl-semibold">
             {t(`detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`, { ns: 'plugin' })}
           </div>
 
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 6768361acf..78d590f409 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -9,7 +9,6 @@ import {
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
-import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -21,6 +20,7 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useDocLink } from '@/context/i18n'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { usePluginInstallation } from '@/hooks/use-query-params'
+import Link from '@/next/link'
 import { fetchBundleInfoFromMarketPlace, fetchManifestFromMarketPlace } from '@/service/plugins'
 import { sleep } from '@/utils'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
index 2bd20fb5c3..c7ddf4711e 100644
--- a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
@@ -5,7 +5,7 @@ import Conversion from '../conversion'
 
 const mockConvert = vi.fn()
 const mockInvalidDatasetDetail = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ datasetId: 'ds-123' }),
 }))
 
diff --git a/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
index 0d3b638bab..88f871cb76 100644
--- a/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
@@ -16,7 +16,7 @@ afterEach(async () => {
 })
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ datasetId: 'test-dataset-id' }),
   useRouter: () => ({ push: mockPush }),
 }))
diff --git a/web/app/components/rag-pipeline/components/conversion.tsx b/web/app/components/rag-pipeline/components/conversion.tsx
index db3c04e9bf..7b2c702725 100644
--- a/web/app/components/rag-pipeline/components/conversion.tsx
+++ b/web/app/components/rag-pipeline/components/conversion.tsx
@@ -1,10 +1,10 @@
-import { useParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Toast from '@/app/components/base/toast'
+import { useParams } from '@/next/navigation'
 import { datasetDetailQueryKeyPrefix } from '@/service/knowledge/use-dataset'
 import { useInvalid } from '@/service/use-base'
 import { useConvertDatasetToPipeline } from '@/service/use-pipeline'
@@ -57,7 +57,7 @@ const Conversion = () => {
       <div className="flex rounded-2xl border-[0.5px] border-components-card-border bg-components-card-bg shadow-sm shadow-shadow-shadow-4">
         <div className="flex max-w-[480px] flex-col justify-between p-10">
           <div className="flex flex-col gap-y-2.5">
-            <div className="title-4xl-semi-bold text-text-primary">
+            <div className="text-text-primary title-4xl-semi-bold">
               {t('conversion.title', { ns: 'datasetPipeline' })}
             </div>
             <div className="body-md-medium">
@@ -73,7 +73,7 @@ const Conversion = () => {
             >
               {t('operations.convert', { ns: 'datasetPipeline' })}
             </Button>
-            <span className="system-xs-regular text-text-warning">
+            <span className="text-text-warning system-xs-regular">
               {t('conversion.warning', { ns: 'datasetPipeline' })}
             </span>
           </div>
diff --git a/web/app/components/rag-pipeline/components/panel/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/panel/__tests__/index.spec.tsx
index f651b16697..8bf870a344 100644
--- a/web/app/components/rag-pipeline/components/panel/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/__tests__/index.spec.tsx
@@ -56,7 +56,7 @@ const { dynamicMocks, mockInputFieldEditorProps } = vi.hoisted(() => {
   return { dynamicMocks: { createMockComponent }, mockInputFieldEditorProps }
 })
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: (_loader: () => Promise<{ default: React.ComponentType }>, _options?: Record<string, unknown>) => {
     return dynamicMocks.createMockComponent()
   },
diff --git a/web/app/components/rag-pipeline/components/panel/index.tsx b/web/app/components/rag-pipeline/components/panel/index.tsx
index e39b62eb49..74cdd7034d 100644
--- a/web/app/components/rag-pipeline/components/panel/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/index.tsx
@@ -1,11 +1,11 @@
 import type { PanelProps } from '@/app/components/workflow/panel'
-import dynamic from 'next/dynamic'
 import {
   memo,
   useMemo,
 } from 'react'
 import Panel from '@/app/components/workflow/panel'
 import { useStore } from '@/app/components/workflow/store'
+import dynamic from '@/next/dynamic'
 
 const Record = dynamic(() => import('@/app/components/workflow/panel/record'), {
   ssr: false,
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
index 00c989acb0..f30db875b3 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
@@ -77,12 +77,12 @@ vi.mock('@/app/components/workflow/header', () => ({
 }))
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ datasetId: 'test-dataset-id' }),
   useRouter: () => ({ push: mockPush }),
 }))
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, ...props }: PropsWithChildren<{ href: string }>) => (
     <a href={href} {...props}>{children}</a>
   ),
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
index 9cd1af2736..f0b187c0fd 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
@@ -8,12 +8,12 @@ import Publisher from '../index'
 import Popup from '../popup'
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ datasetId: 'test-dataset-id' }),
   useRouter: () => ({ push: mockPush }),
 }))
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, ...props }: { children: React.ReactNode, href: string }) => (
     <a href={href} {...props}>{children}</a>
   ),
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
index 48282820d8..5d053f083a 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
@@ -19,12 +19,12 @@ let mockPublishedAt: string | undefined = '2024-01-01T00:00:00Z'
 let mockDraftUpdatedAt: string | undefined = '2024-06-01T00:00:00Z'
 let mockPipelineId: string | undefined = 'pipeline-123'
 let mockIsAllowPublishAsCustom = true
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useParams: () => ({ datasetId: 'ds-123' }),
   useRouter: () => ({ push: mockPush }),
 }))
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href }: { children: React.ReactNode, href: string }) => (
     <a href={href}>{children}</a>
   ),
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index 371e4fd721..6670a8f767 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -10,8 +10,6 @@ import {
   useBoolean,
   useKeyPress,
 } from 'ahooks'
-import Link from 'next/link'
-import { useParams, useRouter } from 'next/navigation'
 import {
   memo,
   useCallback,
@@ -40,6 +38,8 @@ import { useModalContextSelector } from '@/context/modal-context'
 import { useProviderContextSelector } from '@/context/provider-context'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import Link from '@/next/link'
+import { useParams, useRouter } from '@/next/navigation'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import { useInvalid } from '@/service/use-base'
 import {
@@ -119,14 +119,14 @@ const Popup = () => {
             type: 'success',
             message: t('publishPipeline.success.message', { ns: 'datasetPipeline' }),
             children: (
-              <div className="system-xs-regular text-text-secondary">
+              <div className="text-text-secondary system-xs-regular">
                 <Trans
                   i18nKey="publishPipeline.success.tip"
                   ns="datasetPipeline"
                   components={{
                     CustomLink: (
                       <Link
-                        className="system-xs-medium text-text-accent"
+                        className="text-text-accent system-xs-medium"
                         href={`/datasets/${datasetId}/documents`}
                       >
                       </Link>
@@ -185,13 +185,13 @@ const Popup = () => {
         message: t('publishTemplate.success.message', { ns: 'datasetPipeline' }),
         children: (
           <div className="flex flex-col gap-y-1">
-            <span className="system-xs-regular text-text-secondary">
+            <span className="text-text-secondary system-xs-regular">
               {t('publishTemplate.success.tip', { ns: 'datasetPipeline' })}
             </span>
             <Link
               href={docLink()}
               target="_blank"
-              className="system-xs-medium-uppercase inline-block text-text-accent"
+              className="inline-block text-text-accent system-xs-medium-uppercase"
             >
               {t('publishTemplate.success.learnMore', { ns: 'datasetPipeline' })}
             </Link>
@@ -219,14 +219,14 @@ const Popup = () => {
   return (
     <div className={cn('rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5', isAllowPublishAsCustomKnowledgePipelineTemplate ? 'w-[360px]' : 'w-[400px]')}>
       <div className="p-4 pt-3">
-        <div className="system-xs-medium-uppercase flex h-6 items-center text-text-tertiary">
+        <div className="flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
           {publishedAt ? t('common.latestPublished', { ns: 'workflow' }) : t('common.currentDraftUnpublished', { ns: 'workflow' })}
         </div>
         {
           publishedAt
             ? (
                 <div className="flex items-center justify-between">
-                  <div className="system-sm-medium flex items-center text-text-secondary">
+                  <div className="flex items-center text-text-secondary system-sm-medium">
                     {t('common.publishedAt', { ns: 'workflow' })}
                     {' '}
                     {formatTimeFromNow(publishedAt)}
@@ -234,7 +234,7 @@ const Popup = () => {
                 </div>
               )
             : (
-                <div className="system-sm-medium flex items-center text-text-secondary">
+                <div className="flex items-center text-text-secondary system-sm-medium">
                   {t('common.autoSaved', { ns: 'workflow' })}
                   {' '}
                   ·
@@ -305,7 +305,7 @@ const Popup = () => {
             {!isAllowPublishAsCustomKnowledgePipelineTemplate && (
               <PremiumBadge className="shrink-0 cursor-pointer select-none" size="s" color="indigo">
                 <SparklesSoft className="flex size-3 items-center text-components-premium-badge-indigo-text-stop-0" />
-                <span className="system-2xs-medium p-0.5">
+                <span className="p-0.5 system-2xs-medium">
                   {t('upgradeBtn.encourageShort', { ns: 'billing' })}
                 </span>
               </PremiumBadge>
diff --git a/web/app/components/rag-pipeline/components/screenshot.tsx b/web/app/components/rag-pipeline/components/screenshot.tsx
index 3138b846d9..d210419059 100644
--- a/web/app/components/rag-pipeline/components/screenshot.tsx
+++ b/web/app/components/rag-pipeline/components/screenshot.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/image'
 import * as React from 'react'
 import useTheme from '@/hooks/use-theme'
+import Image from '@/next/image'
 import { basePath } from '@/utils/var'
 
 const PipelineScreenShot = () => {
diff --git a/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx b/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx
index 46d229c6b6..7ccd788cb0 100644
--- a/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx
+++ b/web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx
@@ -5,7 +5,7 @@ import MenuDropdown from '../menu-dropdown'
 
 const mockReplace = vi.fn()
 const mockPathname = '/test-path'
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: mockReplace,
   }),
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index 779358bfc6..6162e2a87b 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -4,12 +4,12 @@ import type { InputValueTypes, TextGenerationRunControl } from './types'
 import type { InstalledApp } from '@/models/explore'
 import type { VisionFile } from '@/types/app'
 import { useBoolean } from 'ahooks'
-import { useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { useSearchParams } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 import { useTextGenerationAppState } from './hooks/use-text-generation-app-state'
 import { useTextGenerationBatch } from './hooks/use-text-generation-batch'
diff --git a/web/app/components/share/text-generation/menu-dropdown.tsx b/web/app/components/share/text-generation/menu-dropdown.tsx
index 43856a0e24..09d9a64d7f 100644
--- a/web/app/components/share/text-generation/menu-dropdown.tsx
+++ b/web/app/components/share/text-generation/menu-dropdown.tsx
@@ -5,7 +5,6 @@ import type { SiteInfo } from '@/models/share'
 import {
   RiEqualizer2Line,
 } from '@remixicon/react'
-import { usePathname, useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -18,6 +17,7 @@ import {
 import ThemeSwitcher from '@/app/components/base/theme-switcher'
 import { useWebAppStore } from '@/context/web-app-context'
 import { AccessMode } from '@/models/access-control'
+import { usePathname, useRouter } from '@/next/navigation'
 import { webAppLogout } from '@/service/webapp-auth'
 import { cn } from '@/utils/classnames'
 import Divider from '../../base/divider'
@@ -85,7 +85,7 @@ const MenuDropdown: FC<Props> = ({
         <PortalToFollowElemContent className="z-50">
           <div className="w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm">
             <div className="p-1">
-              <div className={cn('system-md-regular flex cursor-pointer items-center rounded-lg py-1.5 pl-3 pr-2 text-text-secondary')}>
+              <div className={cn('flex cursor-pointer items-center rounded-lg py-1.5 pl-3 pr-2 text-text-secondary system-md-regular')}>
                 <div className="grow">{t('theme.theme', { ns: 'common' })}</div>
                 <ThemeSwitcher />
               </div>
@@ -93,7 +93,7 @@ const MenuDropdown: FC<Props> = ({
             <Divider type="horizontal" className="my-0" />
             <div className="p-1">
               {data?.privacy_policy && (
-                <a href={data.privacy_policy} target="_blank" className="system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover">
+                <a href={data.privacy_policy} target="_blank" className="flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover">
                   <span className="grow">{t('chat.privacyPolicyMiddle', { ns: 'share' })}</span>
                 </a>
               )}
@@ -102,7 +102,7 @@ const MenuDropdown: FC<Props> = ({
                   handleTrigger()
                   setShow(true)
                 }}
-                className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover"
+                className="cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover"
               >
                 {t('userProfile.about', { ns: 'common' })}
               </div>
@@ -111,7 +111,7 @@ const MenuDropdown: FC<Props> = ({
               <div className="p-1">
                 <div
                   onClick={handleLogout}
-                  className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover"
+                  className="cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover"
                 >
                   {t('userProfile.logout', { ns: 'common' })}
                 </div>
diff --git a/web/app/components/tools/provider/empty.tsx b/web/app/components/tools/provider/empty.tsx
index 3b9748dc27..725b171deb 100644
--- a/web/app/components/tools/provider/empty.tsx
+++ b/web/app/components/tools/provider/empty.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { RiArrowRightUpLine } from '@remixicon/react'
-import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
 import useTheme from '@/hooks/use-theme'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
 import { NoToolPlaceholder } from '../../base/icons/src/vender/other'
 import { ToolTypeEnum } from '../../workflow/block-selector/types'
diff --git a/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx b/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx
index e3bdb4e58a..9cd66e37ea 100644
--- a/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx
+++ b/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx
@@ -11,7 +11,7 @@ import MethodSelector from '../method-selector'
 
 // Mock Next.js navigation
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     push: mockPush,
     replace: vi.fn(),
diff --git a/web/app/components/tools/workflow-tool/hooks/__tests__/use-configure-button.spec.ts b/web/app/components/tools/workflow-tool/hooks/__tests__/use-configure-button.spec.ts
index cf685a7590..ad0dd2eff2 100644
--- a/web/app/components/tools/workflow-tool/hooks/__tests__/use-configure-button.spec.ts
+++ b/web/app/components/tools/workflow-tool/hooks/__tests__/use-configure-button.spec.ts
@@ -5,7 +5,7 @@ import { InputVarType } from '@/app/components/workflow/types'
 import { isParametersOutdated, useConfigureButton } from '../use-configure-button'
 
 const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mockPush }),
 }))
 
diff --git a/web/app/components/tools/workflow-tool/hooks/use-configure-button.ts b/web/app/components/tools/workflow-tool/hooks/use-configure-button.ts
index 1aa968ddb1..701ae8fd01 100644
--- a/web/app/components/tools/workflow-tool/hooks/use-configure-button.ts
+++ b/web/app/components/tools/workflow-tool/hooks/use-configure-button.ts
@@ -1,11 +1,11 @@
 import type { Emoji, WorkflowToolProviderOutputParameter, WorkflowToolProviderParameter, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '@/app/components/tools/types'
 import type { InputVar, Variable } from '@/app/components/workflow/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
-import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Toast from '@/app/components/base/toast'
 import { useAppContext } from '@/context/app-context'
+import { useRouter } from '@/next/navigation'
 import { createWorkflowToolProvider, saveWorkflowToolProvider } from '@/service/tools'
 import { useInvalidateAllWorkflowTools, useInvalidateWorkflowToolDetailByAppID, useWorkflowToolDetailByAppID } from '@/service/use-tools'
 
diff --git a/web/app/components/workflow-app/components/workflow-children.tsx b/web/app/components/workflow-app/components/workflow-children.tsx
index 0fbb399dd7..2e65b5963d 100644
--- a/web/app/components/workflow-app/components/workflow-children.tsx
+++ b/web/app/components/workflow-app/components/workflow-children.tsx
@@ -3,7 +3,6 @@ import type {
   TriggerDefaultValue,
 } from '@/app/components/workflow/block-selector/types'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import dynamic from 'next/dynamic'
 import {
   memo,
   useCallback,
@@ -21,6 +20,7 @@ import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { generateNewNode } from '@/app/components/workflow/utils'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import dynamic from '@/next/dynamic'
 import PluginDependency from '../../workflow/plugin-dependency'
 import { useAvailableNodesMetaData } from '../hooks'
 import { useAutoOnboarding } from '../hooks/use-auto-onboarding'
diff --git a/web/app/components/workflow-app/components/workflow-panel.tsx b/web/app/components/workflow-app/components/workflow-panel.tsx
index a1ed289f94..7f70c53e2e 100644
--- a/web/app/components/workflow-app/components/workflow-panel.tsx
+++ b/web/app/components/workflow-app/components/workflow-panel.tsx
@@ -1,5 +1,4 @@
 import type { PanelProps } from '@/app/components/workflow/panel'
-import dynamic from 'next/dynamic'
 import {
   memo,
   useMemo,
@@ -8,6 +7,7 @@ import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Panel from '@/app/components/workflow/panel'
 import { useStore } from '@/app/components/workflow/store'
+import dynamic from '@/next/dynamic'
 import {
   useIsChatMode,
 } from '../hooks'
diff --git a/web/app/components/workflow-app/hooks/use-workflow-run.ts b/web/app/components/workflow-app/hooks/use-workflow-run.ts
index ae4a21f5a0..de110f2525 100644
--- a/web/app/components/workflow-app/hooks/use-workflow-run.ts
+++ b/web/app/components/workflow-app/hooks/use-workflow-run.ts
@@ -4,7 +4,6 @@ import type { IOtherOptions } from '@/service/base'
 import type { VersionHistory } from '@/types/workflow'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
-import { usePathname } from 'next/navigation'
 import { useCallback, useRef } from 'react'
 import {
   useReactFlow,
@@ -21,6 +20,7 @@ import { useWorkflowUpdate } from '@/app/components/workflow/hooks/use-workflow-
 import { useWorkflowRunEvent } from '@/app/components/workflow/hooks/use-workflow-run-event/use-workflow-run-event'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { usePathname } from '@/next/navigation'
 import { handleStream, post, sseGet, ssePost } from '@/service/base'
 import { ContentType } from '@/service/fetch'
 import { useInvalidAllLastRun, useInvalidateWorkflowRunHistory } from '@/service/use-workflow'
diff --git a/web/app/components/workflow-app/index.tsx b/web/app/components/workflow-app/index.tsx
index 6a778ab6b8..0e8731869f 100644
--- a/web/app/components/workflow-app/index.tsx
+++ b/web/app/components/workflow-app/index.tsx
@@ -2,7 +2,6 @@
 
 import type { Features as FeaturesData } from '@/app/components/base/features/types'
 import type { InjectWorkflowStoreSliceFn } from '@/app/components/workflow/store'
-import { useSearchParams } from 'next/navigation'
 import {
   useEffect,
   useMemo,
@@ -25,6 +24,7 @@ import {
   initialNodes,
 } from '@/app/components/workflow/utils'
 import { useAppContext } from '@/context/app-context'
+import { useSearchParams } from '@/next/navigation'
 import { fetchRunDetail } from '@/service/log'
 import { useAppTriggers } from '@/service/use-tools'
 import { AppModeEnum } from '@/types/app'
diff --git a/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx b/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
index 1e40ea65da..44bd1ea775 100644
--- a/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
+++ b/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
@@ -80,7 +80,7 @@ function createMouseEvent() {
   } as unknown as React.MouseEvent<Element, MouseEvent>
 }
 
-vi.mock('next/dynamic', () => ({
+vi.mock('@/next/dynamic', () => ({
   default: () => () => null,
 }))
 
diff --git a/web/app/components/workflow/block-selector/all-start-blocks.tsx b/web/app/components/workflow/block-selector/all-start-blocks.tsx
index d122faecf6..42d3114816 100644
--- a/web/app/components/workflow/block-selector/all-start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/all-start-blocks.tsx
@@ -6,7 +6,6 @@ import type { BlockEnum, OnSelectBlock } from '../types'
 import type { ListRef } from './market-place-plugin/list'
 import type { TriggerDefaultValue, TriggerWithProvider } from './types'
 import { RiArrowRightUpLine } from '@remixicon/react'
-import Link from 'next/link'
 import {
   useCallback,
   useEffect,
@@ -19,6 +18,7 @@ import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import Link from '@/next/link'
 import { useFeaturedTriggersRecommendations } from '@/service/use-plugins'
 import { useAllTriggerPlugins, useInvalidateAllTriggerPlugins } from '@/service/use-triggers'
 import { cn } from '@/utils/classnames'
@@ -153,7 +153,7 @@ const AllStartBlocks = ({
             )}
             {shouldShowTriggerListTitle && (
               <div className="px-3 pb-1 pt-2">
-                <span className="system-xs-medium text-text-primary">{t('tabs.allTriggers', { ns: 'workflow' })}</span>
+                <span className="text-text-primary system-xs-medium">{t('tabs.allTriggers', { ns: 'workflow' })}</span>
               </div>
             )}
             <StartBlocks
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index bde5390cd7..128ef06a62 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -12,7 +12,6 @@ import type { ToolDefaultValue, ToolValue } from './types'
 import type { ListProps, ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import type { OnSelectBlock } from '@/app/components/workflow/types'
 import { RiArrowRightUpLine } from '@remixicon/react'
-import Link from 'next/link'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -21,6 +20,7 @@ import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
 import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useGetLanguage } from '@/context/i18n'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
@@ -260,7 +260,7 @@ const AllTools = ({
             {hasToolsListContent && (
               <>
                 <div className="px-3 pb-1 pt-2">
-                  <span className="system-xs-medium text-text-primary">{t('allTools', { ns: 'tools' })}</span>
+                  <span className="text-text-primary system-xs-medium">{t('allTools', { ns: 'tools' })}</span>
                 </div>
                 <Tools
                   className={toolContentClassName}
diff --git a/web/app/components/workflow/block-selector/featured-tools.tsx b/web/app/components/workflow/block-selector/featured-tools.tsx
index 4e66f08222..2491ceca9c 100644
--- a/web/app/components/workflow/block-selector/featured-tools.tsx
+++ b/web/app/components/workflow/block-selector/featured-tools.tsx
@@ -4,7 +4,6 @@ import type { ToolDefaultValue, ToolValue } from './types'
 import type { Plugin } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n-config'
 import { RiMoreLine } from '@remixicon/react'
-import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ArrowDownDoubleLine, ArrowDownRoundFill, ArrowUpDoubleLine } from '@/app/components/base/icons/src/vender/solid/arrows'
@@ -13,6 +12,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import Action from '@/app/components/workflow/block-selector/market-place-plugin/action'
 import { useGetLanguage } from '@/context/i18n'
+import Link from '@/next/link'
 import { isServer } from '@/utils/client'
 import { formatNumber } from '@/utils/format'
 import { getMarketplaceUrl } from '@/utils/var'
@@ -132,7 +132,7 @@ const FeaturedTools = ({
         className="flex w-full items-center rounded-md px-0 py-1 text-left text-text-primary"
         onClick={() => setIsCollapsed(prev => !prev)}
       >
-        <span className="system-xs-medium text-text-primary">{t('tabs.featuredTools', { ns: 'workflow' })}</span>
+        <span className="text-text-primary system-xs-medium">{t('tabs.featuredTools', { ns: 'workflow' })}</span>
         <ArrowDownRoundFill className={`ml-0.5 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
       </button>
 
@@ -145,7 +145,7 @@ const FeaturedTools = ({
           )}
 
           {showEmptyState && (
-            <p className="system-xs-regular py-2 text-text-tertiary">
+            <p className="py-2 text-text-tertiary system-xs-regular">
               <Link className="text-text-accent" href={getMarketplaceUrl('', { category: 'tool' })} target="_blank" rel="noopener noreferrer">
                 {t('tabs.noFeaturedPlugins', { ns: 'workflow' })}
               </Link>
@@ -275,13 +275,13 @@ function FeaturedToolUninstalledItem({
           <div className="flex h-full min-w-0 items-center">
             <BlockIcon type={BlockEnum.Tool} toolIcon={plugin.icon} />
             <div className="ml-2 min-w-0">
-              <div className="system-sm-medium truncate text-text-secondary">{label}</div>
+              <div className="truncate text-text-secondary system-sm-medium">{label}</div>
             </div>
           </div>
           <div className="ml-auto flex h-full items-center gap-1 pl-1">
-            <span className={`system-xs-regular text-text-tertiary ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
+            <span className={`text-text-tertiary system-xs-regular ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
             <div
-              className={`system-xs-medium flex h-full items-center gap-1 text-components-button-secondary-accent-text [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? 'flex' : 'hidden group-hover:flex'}`}
+              className={`flex h-full items-center gap-1 text-components-button-secondary-accent-text system-xs-medium [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
               onMouseEnter={() => setIsActionHovered(true)}
               onMouseLeave={() => {
                 if (!actionOpen)
diff --git a/web/app/components/workflow/block-selector/featured-triggers.tsx b/web/app/components/workflow/block-selector/featured-triggers.tsx
index 01cb5d100f..ca81575824 100644
--- a/web/app/components/workflow/block-selector/featured-triggers.tsx
+++ b/web/app/components/workflow/block-selector/featured-triggers.tsx
@@ -3,7 +3,6 @@ import type { TriggerDefaultValue, TriggerWithProvider } from './types'
 import type { Plugin } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n-config'
 import { RiMoreLine } from '@remixicon/react'
-import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ArrowDownDoubleLine, ArrowDownRoundFill, ArrowUpDoubleLine } from '@/app/components/base/icons/src/vender/solid/arrows'
@@ -12,6 +11,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import Action from '@/app/components/workflow/block-selector/market-place-plugin/action'
 import { useGetLanguage } from '@/context/i18n'
+import Link from '@/next/link'
 import { isServer } from '@/utils/client'
 import { formatNumber } from '@/utils/format'
 import { getMarketplaceUrl } from '@/utils/var'
@@ -127,7 +127,7 @@ const FeaturedTriggers = ({
         className="flex w-full items-center rounded-md px-0 py-1 text-left text-text-primary"
         onClick={() => setIsCollapsed(prev => !prev)}
       >
-        <span className="system-xs-medium text-text-primary">{t('tabs.featuredTools', { ns: 'workflow' })}</span>
+        <span className="text-text-primary system-xs-medium">{t('tabs.featuredTools', { ns: 'workflow' })}</span>
         <ArrowDownRoundFill className={`ml-0.5 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
       </button>
 
@@ -140,7 +140,7 @@ const FeaturedTriggers = ({
           )}
 
           {showEmptyState && (
-            <p className="system-xs-regular py-2 text-text-tertiary">
+            <p className="py-2 text-text-tertiary system-xs-regular">
               <Link className="text-text-accent" href={getMarketplaceUrl('', { category: 'trigger' })} target="_blank" rel="noopener noreferrer">
                 {t('tabs.noFeaturedTriggers', { ns: 'workflow' })}
               </Link>
@@ -270,13 +270,13 @@ function FeaturedTriggerUninstalledItem({
           <div className="flex h-full min-w-0 items-center">
             <BlockIcon type={BlockEnum.TriggerPlugin} toolIcon={plugin.icon} />
             <div className="ml-2 min-w-0">
-              <div className="system-sm-medium truncate text-text-secondary">{label}</div>
+              <div className="truncate text-text-secondary system-sm-medium">{label}</div>
             </div>
           </div>
           <div className="ml-auto flex h-full items-center gap-1 pl-1">
-            <span className={`system-xs-regular text-text-tertiary ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
+            <span className={`text-text-tertiary system-xs-regular ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
             <div
-              className={`system-xs-medium flex h-full items-center gap-1 text-components-button-secondary-accent-text [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? 'flex' : 'hidden group-hover:flex'}`}
+              className={`flex h-full items-center gap-1 text-components-button-secondary-accent-text system-xs-medium [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
               onMouseEnter={() => setIsActionHovered(true)}
               onMouseLeave={() => {
                 if (!actionOpen)
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index 29f1e77e14..aa8f13c639 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -3,9 +3,9 @@ import type { RefObject } from 'react'
 import type { Plugin, PluginCategoryEnum } from '@/app/components/plugins/types'
 import { RiArrowRightUpLine, RiSearchLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import Link from 'next/link'
 import { useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import Link from '@/next/link'
 import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
@@ -79,7 +79,7 @@ const List = ({
 
     return (
       <Link
-        className="system-sm-medium sticky bottom-0 z-10 flex h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg"
+        className="sticky bottom-0 z-10 flex h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg system-sm-medium"
         href={getMarketplaceUrl('', { category })}
         target="_blank"
       >
@@ -95,7 +95,7 @@ const List = ({
     <>
       {hasRes && (
         <div
-          className={cn('system-sm-medium sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1 text-text-primary', stickyClassName, !disableMaxWidth && maxWidthClassName)}
+          className={cn('sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1 text-text-primary system-sm-medium', stickyClassName, !disableMaxWidth && maxWidthClassName)}
           onClick={handleHeadClick}
         >
           <span>{t('fromMarketplace', { ns: 'plugin' })}</span>
@@ -124,7 +124,7 @@ const List = ({
             <Link
               href={urlWithSearchText}
               target="_blank"
-              className="system-sm-medium flex h-4 shrink-0 items-center text-text-accent-light-mode-only"
+              className="flex h-4 shrink-0 items-center text-text-accent-light-mode-only system-sm-medium"
             >
               <RiSearchLine className="mr-0.5 h-3 w-3" />
               <span>{t('searchInMarketplace', { ns: 'plugin' })}</span>
diff --git a/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx b/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
index e934f27fd1..8b6195c9eb 100644
--- a/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
+++ b/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
@@ -3,13 +3,13 @@ import type { Dispatch, SetStateAction } from 'react'
 import type { ViewType } from '@/app/components/workflow/block-selector/view-type-select'
 import type { OnSelectBlock } from '@/app/components/workflow/types'
 import { RiMoreLine } from '@remixicon/react'
-import Link from 'next/link'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/arrows'
 import Loading from '@/app/components/base/loading'
 import { getFormattedPlugin } from '@/app/components/plugins/marketplace/utils'
+import Link from '@/next/link'
 import { useRAGRecommendedPlugins } from '@/service/use-tools'
 import { isServer } from '@/utils/client'
 import { getMarketplaceUrl } from '@/utils/var'
@@ -83,7 +83,7 @@ const RAGToolRecommendations = ({
         className="flex w-full items-center rounded-md px-3 pb-0.5 pt-1 text-left text-text-tertiary"
         onClick={() => setIsCollapsed(prev => !prev)}
       >
-        <span className="system-xs-medium text-text-tertiary">{t('ragToolSuggestions.title', { ns: 'pipeline' })}</span>
+        <span className="text-text-tertiary system-xs-medium">{t('ragToolSuggestions.title', { ns: 'pipeline' })}</span>
         <ArrowDownRoundFill className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
       </button>
       {!isCollapsed && (
@@ -95,7 +95,7 @@ const RAGToolRecommendations = ({
             </div>
           )}
           {!isFetchingRAGRecommendedPlugins && recommendedPlugins.length === 0 && unInstalledPlugins.length === 0 && (
-            <p className="system-xs-regular px-3 py-1 text-text-tertiary">
+            <p className="px-3 py-1 text-text-tertiary system-xs-regular">
               <Trans
                 i18nKey="ragToolSuggestions.noRecommendationPlugins"
                 ns="pipeline"
@@ -127,7 +127,7 @@ const RAGToolRecommendations = ({
                 <div className="px-1">
                   <RiMoreLine className="size-4 text-text-tertiary" />
                 </div>
-                <div className="system-xs-regular text-text-tertiary">
+                <div className="text-text-tertiary system-xs-regular">
                   {t('operation.more', { ns: 'common' })}
                 </div>
               </div>
diff --git a/web/app/components/workflow/header/index.tsx b/web/app/components/workflow/header/index.tsx
index 0590c016f2..5e6b714213 100644
--- a/web/app/components/workflow/header/index.tsx
+++ b/web/app/components/workflow/header/index.tsx
@@ -1,8 +1,8 @@
 import type { HeaderInNormalProps } from './header-in-normal'
 import type { HeaderInRestoringProps } from './header-in-restoring'
 import type { HeaderInHistoryProps } from './header-in-view-history'
-import dynamic from 'next/dynamic'
-import { usePathname } from 'next/navigation'
+import dynamic from '@/next/dynamic'
+import { usePathname } from '@/next/navigation'
 import {
   useWorkflowMode,
 } from '../hooks'
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 087368029f..014193bc5c 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -15,7 +15,6 @@ import {
 } from 'ahooks'
 import { isEqual } from 'es-toolkit/predicate'
 import { setAutoFreeze } from 'immer'
-import dynamic from 'next/dynamic'
 import {
   memo,
   useCallback,
@@ -37,6 +36,7 @@ import ReactFlow, {
 } from 'reactflow'
 import { IS_DEV } from '@/config'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import dynamic from '@/next/dynamic'
 import {
   useAllBuiltInTools,
   useAllCustomTools,
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index 4635a5575c..f872fefe19 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -4,7 +4,6 @@ import type { Strategy } from './agent-strategy'
 import type { StrategyPluginDetail } from '@/app/components/plugins/types'
 import type { ListProps, ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { RiArrowDownSLine, RiErrorWarningFill } from '@remixicon/react'
-import Link from 'next/link'
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
@@ -17,6 +16,7 @@ import { PluginCategoryEnum } from '@/app/components/plugins/types'
 import { CollectionType } from '@/app/components/tools/types'
 import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import Link from '@/next/link'
 import { useStrategyProviders } from '@/service/use-strategy'
 import { cn } from '@/utils/classnames'
 import Tools from '../../../block-selector/tools'
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
index 42be3d46e4..7c67a1e1f2 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -5,7 +5,6 @@ import type { ToolVarInputs } from '../../tool/types'
 import type { CredentialFormSchema, CredentialFormSchemaNumberInput, CredentialFormSchemaTextInput } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { PluginMeta } from '@/app/components/plugins/types'
 import { noop } from 'es-toolkit/function'
-import Link from 'next/link'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Agent } from '@/app/components/base/icons/src/vender/workflow'
@@ -19,6 +18,7 @@ import MultipleToolSelector from '@/app/components/plugins/plugin-detail-panel/m
 import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
 import { useDocLink } from '@/context/i18n'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
+import Link from '@/next/link'
 import { AppModeEnum } from '@/types/app'
 import { useWorkflowStore } from '../../../store'
 import { AgentStrategySelector } from './agent-strategy-selector'
diff --git a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
index eb32c0595f..a0ef23de95 100644
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@@ -3,7 +3,6 @@
 import type { FC, ReactNode } from 'react'
 import { RiArrowLeftRightLine, RiExternalLinkLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import Link from 'next/link'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
@@ -13,6 +12,7 @@ import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-ico
 import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
 import PluginMutationModel from '@/app/components/plugins/plugin-mutation-model'
 import PluginVersionPicker from '@/app/components/plugins/update-plugin/plugin-version-picker'
+import Link from '@/next/link'
 import { useCheckInstalled, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
 import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
@@ -96,7 +96,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
                 href={getMarketplaceUrl(`/plugins/${pluginDetail.declaration.author}/${pluginDetail.declaration.name}`)}
                 target="_blank"
               >
-                <span className="system-xs-regular text-xs text-text-accent">
+                <span className="text-xs text-text-accent system-xs-regular">
                   {t('nodes.agent.installPlugin.changelog', { ns: 'workflow' })}
                 </span>
                 <RiExternalLinkLine className="size-3 text-text-accent" />
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index 88ada8b11e..739b10327c 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import type { VersionHistoryPanelProps } from '@/app/components/workflow/panel/version-history-panel'
-import dynamic from 'next/dynamic'
 import { memo, useCallback, useEffect, useRef } from 'react'
 import { useStore as useReactflow } from 'reactflow'
 import { useShallow } from 'zustand/react/shallow'
+import dynamic from '@/next/dynamic'
 import { cn } from '@/utils/classnames'
 import { Panel as NodePanel } from '../nodes'
 import { useStore } from '../store'
diff --git a/web/app/education-apply/education-apply-page.tsx b/web/app/education-apply/education-apply-page.tsx
index 636a471d3d..19ef26814d 100644
--- a/web/app/education-apply/education-apply-page.tsx
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -2,10 +2,6 @@
 
 import { RiExternalLinkLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import {
-  useRouter,
-  useSearchParams,
-} from 'next/navigation'
 import {
   useState,
 } from 'react'
@@ -16,6 +12,10 @@ import { useToastContext } from '@/app/components/base/toast/context'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
 import { useDocLink } from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
+import {
+  useRouter,
+  useSearchParams,
+} from '@/next/navigation'
 import {
   useEducationAdd,
   useInvalidateEducationStatus,
@@ -90,11 +90,11 @@ const EducationApplyAge = () => {
         </div>
         <div className="mx-auto max-w-[720px] px-8 pb-[180px]">
           <div className="mb-2 flex h-[192px] flex-col justify-end pb-4 pt-3 text-text-primary-on-surface">
-            <div className="title-5xl-bold mb-2 shadow-xs">{t('toVerified', { ns: 'education' })}</div>
-            <div className="system-md-medium shadow-xs">
+            <div className="mb-2 shadow-xs title-5xl-bold">{t('toVerified', { ns: 'education' })}</div>
+            <div className="shadow-xs system-md-medium">
               {t('toVerifiedTip.front', { ns: 'education' })}
 &nbsp;
-              <span className="system-md-semibold underline">{t('toVerifiedTip.coupon', { ns: 'education' })}</span>
+              <span className="underline system-md-semibold">{t('toVerifiedTip.coupon', { ns: 'education' })}</span>
 &nbsp;
               {t('toVerifiedTip.end', { ns: 'education' })}
             </div>
@@ -103,7 +103,7 @@ const EducationApplyAge = () => {
             <UserInfo />
           </div>
           <div className="mb-7">
-            <div className="system-md-semibold mb-1 flex h-6 items-center text-text-secondary">
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-md-semibold">
               {t('form.schoolName.title', { ns: 'education' })}
             </div>
             <SearchInput
@@ -112,7 +112,7 @@ const EducationApplyAge = () => {
             />
           </div>
           <div className="mb-7">
-            <div className="system-md-semibold mb-1 flex h-6 items-center text-text-secondary">
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-md-semibold">
               {t('form.schoolRole.title', { ns: 'education' })}
             </div>
             <RoleSelector
@@ -121,10 +121,10 @@ const EducationApplyAge = () => {
             />
           </div>
           <div className="mb-7">
-            <div className="system-md-semibold mb-1 flex h-6 items-center text-text-secondary">
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-md-semibold">
               {t('form.terms.title', { ns: 'education' })}
             </div>
-            <div className="system-md-regular mb-1 text-text-tertiary">
+            <div className="mb-1 text-text-tertiary system-md-regular">
               {t('form.terms.desc.front', { ns: 'education' })}
 &nbsp;
               <a href="https://dify.ai/terms" target="_blank" className="text-text-secondary hover:underline">{t('form.terms.desc.termsOfService', { ns: 'education' })}</a>
@@ -134,7 +134,7 @@ const EducationApplyAge = () => {
               <a href="https://dify.ai/privacy" target="_blank" className="text-text-secondary hover:underline">{t('form.terms.desc.privacyPolicy', { ns: 'education' })}</a>
               {t('form.terms.desc.end', { ns: 'education' })}
             </div>
-            <div className="system-md-regular py-2 text-text-primary">
+            <div className="py-2 text-text-primary system-md-regular">
               <div className="mb-2 flex">
                 <Checkbox
                   className="mr-2 shrink-0"
@@ -162,7 +162,7 @@ const EducationApplyAge = () => {
           </Button>
           <div className="mb-4 mt-5 h-px bg-gradient-to-r from-[rgba(16,24,40,0.08)]"></div>
           <a
-            className="system-xs-regular flex items-center text-text-accent"
+            className="flex items-center text-text-accent system-xs-regular"
             href={docLink('/use-dify/workspace/subscription-management#dify-for-education')}
             target="_blank"
           >
diff --git a/web/app/education-apply/expire-notice-modal.tsx b/web/app/education-apply/expire-notice-modal.tsx
index 2b96ecba88..c4b0370055 100644
--- a/web/app/education-apply/expire-notice-modal.tsx
+++ b/web/app/education-apply/expire-notice-modal.tsx
@@ -1,7 +1,5 @@
 'use client'
 import { RiExternalLinkLine } from '@remixicon/react'
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -9,6 +7,8 @@ import Modal from '@/app/components/base/modal'
 import { useDocLink } from '@/context/i18n'
 import { useModalContextSelector } from '@/context/modal-context'
 import useTimestamp from '@/hooks/use-timestamp'
+import Link from '@/next/link'
+import { useRouter } from '@/next/navigation'
 import { useEducationVerify } from '@/service/use-education'
 import { SparklesSoftAccent } from '../components/base/icons/src/public/common'
 
@@ -48,7 +48,7 @@ const ExpireNoticeModal: React.FC<Props> = ({ expireAt, expired, onClose }) => {
       closable
       className="max-w-[600px]"
     >
-      <div className="body-md-regular mt-5 space-y-5 text-text-secondary">
+      <div className="mt-5 space-y-5 text-text-secondary body-md-regular">
         <div>
           {expired
             ? (
@@ -60,16 +60,16 @@ const ExpireNoticeModal: React.FC<Props> = ({ expireAt, expired, onClose }) => {
             : t(`${i18nPrefix}.isAboutToExpire.summary`, { ns: 'education' })}
         </div>
         <div>
-          <strong className="title-md-semi-bold block">{t(`${i18nPrefix}.stillInEducation.title`, { ns: 'education' })}</strong>
+          <strong className="block title-md-semi-bold">{t(`${i18nPrefix}.stillInEducation.title`, { ns: 'education' })}</strong>
           {t(`${i18nPrefix}.stillInEducation.${expired ? 'expired' : 'isAboutToExpire'}`, { ns: 'education' })}
         </div>
         <div>
-          <strong className="title-md-semi-bold block">{t(`${i18nPrefix}.alreadyGraduated.title`, { ns: 'education' })}</strong>
+          <strong className="block title-md-semi-bold">{t(`${i18nPrefix}.alreadyGraduated.title`, { ns: 'education' })}</strong>
           {t(`${i18nPrefix}.alreadyGraduated.${expired ? 'expired' : 'isAboutToExpire'}`, { ns: 'education' })}
         </div>
       </div>
       <div className="mt-7 flex items-center justify-between space-x-2">
-        <Link className="system-xs-regular flex items-center space-x-1 text-text-accent" href={eduDocLink} target="_blank" rel="noopener noreferrer">
+        <Link className="flex items-center space-x-1 text-text-accent system-xs-regular" href={eduDocLink} target="_blank" rel="noopener noreferrer">
           <div>{t('learn', { ns: 'education' })}</div>
           <RiExternalLinkLine className="size-3" />
         </Link>
diff --git a/web/app/education-apply/hooks.ts b/web/app/education-apply/hooks.ts
index 52acde2975..79faa8b3b2 100644
--- a/web/app/education-apply/hooks.ts
+++ b/web/app/education-apply/hooks.ts
@@ -3,7 +3,6 @@ import { useDebounceFn, useLocalStorageState } from 'ahooks'
 import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
-import { useRouter, useSearchParams } from 'next/navigation'
 import {
   useCallback,
   useEffect,
@@ -13,6 +12,7 @@ import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/con
 import { useAppContext } from '@/context/app-context'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { useEducationAutocomplete, useEducationVerify } from '@/service/use-education'
 import {
   EDUCATION_RE_VERIFY_ACTION,
diff --git a/web/app/education-apply/user-info.tsx b/web/app/education-apply/user-info.tsx
index 6481194870..8e0bbbfa2c 100644
--- a/web/app/education-apply/user-info.tsx
+++ b/web/app/education-apply/user-info.tsx
@@ -1,9 +1,9 @@
-import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/app/components/base/avatar'
 import Button from '@/app/components/base/button'
 import { Triangle } from '@/app/components/base/icons/src/public/education'
 import { useAppContext } from '@/context/app-context'
+import { useRouter } from '@/next/navigation'
 import { useLogout } from '@/service/use-common'
 
 const UserInfo = () => {
@@ -24,7 +24,7 @@ const UserInfo = () => {
   return (
     <div className="relative flex items-center justify-between rounded-xl border-[4px] border-components-panel-on-panel-item-bg bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 pb-6 pl-6 pr-8 pt-9 shadow-shadow-shadow-5">
       <div className="absolute left-0 top-0 flex items-center">
-        <div className="system-2xs-semibold-uppercase flex h-[22px] items-center bg-components-panel-on-panel-item-bg pl-2 pt-1 text-text-accent-light-mode-only">
+        <div className="flex h-[22px] items-center bg-components-panel-on-panel-item-bg pl-2 pt-1 text-text-accent-light-mode-only system-2xs-semibold-uppercase">
           {t('currentSigned', { ns: 'education' })}
         </div>
         <Triangle className="h-[22px] w-4 text-components-panel-on-panel-item-bg" />
@@ -37,10 +37,10 @@ const UserInfo = () => {
           size="2xl"
         />
         <div className="pt-1.5">
-          <div className="system-md-semibold text-text-primary">
+          <div className="text-text-primary system-md-semibold">
             {userProfile.name}
           </div>
-          <div className="system-sm-regular text-text-secondary">
+          <div className="text-text-secondary system-sm-regular">
             {userProfile.email}
           </div>
         </div>
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index 880b010d9c..00f61cab2c 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -1,12 +1,12 @@
 'use client'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
-import { useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
 import { validPassword } from '@/config'
+import { useSearchParams } from '@/next/navigation'
 import { changePasswordWithToken } from '@/service/common'
 import { useVerifyForgotPasswordToken } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/forgot-password/ForgotPasswordForm.spec.tsx b/web/app/forgot-password/ForgotPasswordForm.spec.tsx
index aa360cb6c3..8ed120d146 100644
--- a/web/app/forgot-password/ForgotPasswordForm.spec.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.spec.tsx
@@ -5,7 +5,7 @@ import ForgotPasswordForm from './ForgotPasswordForm'
 
 const mockPush = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mockPush }),
 }))
 
diff --git a/web/app/forgot-password/ForgotPasswordForm.tsx b/web/app/forgot-password/ForgotPasswordForm.tsx
index 274c2fd4e6..fdc35c20da 100644
--- a/web/app/forgot-password/ForgotPasswordForm.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.tsx
@@ -2,15 +2,15 @@
 import type { InitValidateStatusResponse } from '@/models/common'
 import { useStore } from '@tanstack/react-form'
 
-import { useRouter } from 'next/navigation'
-
 import * as React from 'react'
+
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as z from 'zod'
 import Button from '@/app/components/base/button'
 import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
+import { useRouter } from '@/next/navigation'
 import {
   fetchInitValidateStatus,
   fetchSetupStatus,
diff --git a/web/app/forgot-password/page.tsx b/web/app/forgot-password/page.tsx
index 338f4eaf13..7014b9e5b6 100644
--- a/web/app/forgot-password/page.tsx
+++ b/web/app/forgot-password/page.tsx
@@ -1,9 +1,9 @@
 'use client'
-import { useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import ChangePasswordForm from '@/app/forgot-password/ChangePasswordForm'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useSearchParams } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
 import Header from '../signin/_header'
 import ForgotPasswordForm from './ForgotPasswordForm'
diff --git a/web/app/init/InitPasswordPopup.tsx b/web/app/init/InitPasswordPopup.tsx
index c8598881a3..d2ec3c7e2b 100644
--- a/web/app/init/InitPasswordPopup.tsx
+++ b/web/app/init/InitPasswordPopup.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { InitValidateStatusResponse } from '@/models/common'
-import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useRouter } from '@/next/navigation'
 import { fetchInitValidateStatus, initValidate } from '@/service/common'
 import { basePath } from '@/utils/var'
 import Loading from '../components/base/loading'
diff --git a/web/app/install/installForm.spec.tsx b/web/app/install/installForm.spec.tsx
index 17ce35d6a1..1286d02343 100644
--- a/web/app/install/installForm.spec.tsx
+++ b/web/app/install/installForm.spec.tsx
@@ -7,7 +7,7 @@ import InstallForm from './installForm'
 const mockPush = vi.fn()
 const mockReplace = vi.fn()
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: mockPush, replace: mockReplace }),
 }))
 
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index 47de6d1fb3..292a922723 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -1,10 +1,8 @@
 'use client'
 import type { InitValidateStatusResponse, SetupStatusResponse } from '@/models/common'
 import { useStore } from '@tanstack/react-form'
-import Link from 'next/link'
-
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
+
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as z from 'zod'
@@ -13,9 +11,11 @@ import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
 import Input from '@/app/components/base/input'
 import { validPassword } from '@/config'
-
 import { LICENSE_LINK } from '@/constants/link'
 import useDocumentTitle from '@/hooks/use-document-title'
+
+import Link from '@/next/link'
+import { useRouter } from '@/next/navigation'
 import { fetchInitValidateStatus, fetchSetupStatus, login, setup } from '@/service/common'
 import { cn } from '@/utils/classnames'
 import { encryptPassword as encodePassword } from '@/utils/encryption'
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 2d814162d1..368e93a99a 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,14 +1,14 @@
-import type { Viewport } from 'next'
+import type { Viewport } from '@/next'
 import { Agentation } from 'agentation'
 import { Provider as JotaiProvider } from 'jotai/react'
 import { ThemeProvider } from 'next-themes'
-import { Instrument_Serif } from 'next/font/google'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import { IS_DEV } from '@/config'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import { getDatasetMap } from '@/env'
 import { getLocaleOnServer } from '@/i18n-config/server'
+import { Instrument_Serif } from '@/next/font/google'
 import { cn } from '@/utils/classnames'
 import { ToastProvider } from './components/base/toast'
 import { TooltipProvider } from './components/base/ui/tooltip'
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 117d6c838d..65f8827e01 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -1,5 +1,5 @@
-import Link from 'next/link'
 import Loading from '@/app/components/base/loading'
+import Link from '@/next/link'
 
 const Home = async () => {
   return (
diff --git a/web/app/repos/[owner]/[repo]/releases/route.ts b/web/app/repos/[owner]/[repo]/releases/route.ts
index cc62e9d86c..1ae8a5327f 100644
--- a/web/app/repos/[owner]/[repo]/releases/route.ts
+++ b/web/app/repos/[owner]/[repo]/releases/route.ts
@@ -1,8 +1,8 @@
-import type { NextRequest } from 'next/server'
+import type { NextRequest } from '@/next/server'
 import { Octokit } from '@octokit/core'
 import { RequestError } from '@octokit/request-error'
-import { NextResponse } from 'next/server'
 import { GITHUB_ACCESS_TOKEN } from '@/config'
+import { NextResponse } from '@/next/server'
 
 type Params = {
   owner: string
diff --git a/web/app/reset-password/check-code/page.tsx b/web/app/reset-password/check-code/page.tsx
index cf4a6e6ce4..84c6371109 100644
--- a/web/app/reset-password/check-code/page.tsx
+++ b/web/app/reset-password/check-code/page.tsx
@@ -1,6 +1,5 @@
 'use client'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -8,6 +7,7 @@ import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { sendResetPasswordCode, verifyResetPasswordCode } from '@/service/common'
 
 export default function CheckCode() {
@@ -68,8 +68,8 @@ export default function CheckCode() {
         <RiMailSendFill className="h-6 w-6 text-2xl" />
       </div>
       <div className="pb-4 pt-2">
-        <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <h2 className="text-text-primary title-4xl-semi-bold">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
+        <p className="mt-2 text-text-secondary body-md-regular">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -81,7 +81,7 @@ export default function CheckCode() {
 
       <form action="">
         <input type="text" className="hidden" />
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 text-text-secondary system-md-semibold">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className="mt-1" placeholder={t('checkCode.verificationCodePlaceholder', { ns: 'login' }) as string} />
         <Button loading={loading} disabled={loading} className="my-3 w-full" variant="primary" onClick={verify}>{t('checkCode.verify', { ns: 'login' })}</Button>
         <Countdown onResend={resendCode} />
@@ -93,7 +93,7 @@ export default function CheckCode() {
         <div className="inline-block rounded-full bg-background-default-dimmed p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/reset-password/page.tsx b/web/app/reset-password/page.tsx
index 9fdccdfd87..e328e80cb8 100644
--- a/web/app/reset-password/page.tsx
+++ b/web/app/reset-password/page.tsx
@@ -1,8 +1,6 @@
 'use client'
 import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -11,6 +9,8 @@ import Toast from '@/app/components/base/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
 import useDocumentTitle from '@/hooks/use-document-title'
+import Link from '@/next/link'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { sendResetPasswordCode } from '@/service/common'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '../components/signin/countdown'
 
@@ -67,8 +67,8 @@ export default function CheckCode() {
         <RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pb-4 pt-2">
-        <h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <h2 className="text-text-primary title-4xl-semi-bold">{t('resetPassword', { ns: 'login' })}</h2>
+        <p className="mt-2 text-text-secondary body-md-regular">
           {t('resetPasswordDesc', { ns: 'login' })}
         </p>
       </div>
@@ -76,7 +76,7 @@ export default function CheckCode() {
       <form onSubmit={noop}>
         <input type="text" className="hidden" />
         <div className="mb-2">
-          <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+          <label htmlFor="email" className="my-2 text-text-secondary system-md-semibold">{t('email', { ns: 'login' })}</label>
           <div className="mt-1">
             <Input id="email" type="email" disabled={loading} value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
           </div>
@@ -92,7 +92,7 @@ export default function CheckCode() {
         <div className="inline-block rounded-full bg-background-default-dimmed p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('backToLogin', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('backToLogin', { ns: 'login' })}</span>
       </Link>
     </div>
   )
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index bf7947c79d..686e57054c 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -1,13 +1,13 @@
 'use client'
 import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import { validPassword } from '@/config'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { changePasswordWithToken } from '@/service/common'
 import { cn } from '@/utils/classnames'
 
@@ -96,10 +96,10 @@ const ChangePasswordForm = () => {
       {!showSuccess && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h2 className="text-text-primary title-4xl-semi-bold">
               {t('changePassword', { ns: 'login' })}
             </h2>
-            <p className="body-md-regular mt-2 text-text-secondary">
+            <p className="mt-2 text-text-secondary body-md-regular">
               {t('changePasswordTip', { ns: 'login' })}
             </p>
           </div>
@@ -108,7 +108,7 @@ const ChangePasswordForm = () => {
             <div>
               {/* Password */}
               <div className="mb-5">
-                <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="password" className="my-2 text-text-secondary system-md-semibold">
                   {t('account.newPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
@@ -130,11 +130,11 @@ const ChangePasswordForm = () => {
                     </Button>
                   </div>
                 </div>
-                <div className="body-xs-regular mt-1 text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
+                <div className="mt-1 text-text-secondary body-xs-regular">{t('error.passwordInvalid', { ns: 'login' })}</div>
               </div>
               {/* Confirm Password */}
               <div className="mb-5">
-                <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="confirmPassword" className="my-2 text-text-secondary system-md-semibold">
                   {t('account.confirmPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
@@ -175,7 +175,7 @@ const ChangePasswordForm = () => {
             <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
               <RiCheckboxCircleFill className="h-6 w-6 text-text-success" />
             </div>
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h2 className="text-text-primary title-4xl-semi-bold">
               {t('passwordChangedTip', { ns: 'login' })}
             </h2>
           </div>
diff --git a/web/app/routePrefixHandle.tsx b/web/app/routePrefixHandle.tsx
index d3a36a51fc..e772c7964a 100644
--- a/web/app/routePrefixHandle.tsx
+++ b/web/app/routePrefixHandle.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { usePathname } from 'next/navigation'
 import { useEffect } from 'react'
+import { usePathname } from '@/next/navigation'
 import { basePath } from '@/utils/var'
 
 export default function RoutePrefixHandle() {
diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx
index 63be6df674..7ebff9f73c 100644
--- a/web/app/signin/_header.tsx
+++ b/web/app/signin/_header.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { Locale } from '@/i18n-config'
-import dynamic from 'next/dynamic'
 import Divider from '@/app/components/base/divider'
 import LocaleSigninSelect from '@/app/components/base/select/locale-signin'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useLocale } from '@/context/i18n'
 import { setLocaleOnClient } from '@/i18n-config'
 import { languages } from '@/i18n-config/language'
+import dynamic from '@/next/dynamic'
 
 // Avoid rendering the logo and theme selector on the server
 const DifyLogo = dynamic(() => import('@/app/components/base/logo/dify-logo'), {
diff --git a/web/app/signin/check-code/page.tsx b/web/app/signin/check-code/page.tsx
index 24ac92157e..dfd346e502 100644
--- a/web/app/signin/check-code/page.tsx
+++ b/web/app/signin/check-code/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { FormEvent } from 'react'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
@@ -9,8 +8,9 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import Countdown from '@/app/components/signin/countdown'
-
 import { useLocale } from '@/context/i18n'
+
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { emailLoginWithCode, sendEMailLoginCode } from '@/service/common'
 import { encryptVerificationCode } from '@/utils/encryption'
 import { resolvePostLoginRedirect } from '../utils/post-login-redirect'
diff --git a/web/app/signin/components/mail-and-code-auth.tsx b/web/app/signin/components/mail-and-code-auth.tsx
index 4454fc821f..55b676c1e2 100644
--- a/web/app/signin/components/mail-and-code-auth.tsx
+++ b/web/app/signin/components/mail-and-code-auth.tsx
@@ -1,5 +1,4 @@
 import type { FormEvent } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -8,6 +7,7 @@ import Toast from '@/app/components/base/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { sendEMailLoginCode } from '@/service/common'
 
 type MailAndCodeAuthProps = {
@@ -64,7 +64,7 @@ export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) {
     <form onSubmit={handleSubmit}>
       <input type="text" className="hidden" />
       <div className="mb-2">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+        <label htmlFor="email" className="my-2 text-text-secondary system-md-semibold">{t('email', { ns: 'login' })}</label>
         <div className="mt-1">
           <Input id="email" type="email" disabled={isInvite} value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
         </div>
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index 877720b691..7ce4c9054f 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -1,7 +1,5 @@
 import type { ResponseError } from '@/service/fetch'
 import { noop } from 'es-toolkit/function'
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
@@ -10,6 +8,8 @@ import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
+import Link from '@/next/link'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { login } from '@/service/common'
 import { setWebAppAccessToken } from '@/service/webapp-auth'
 import { encryptPassword } from '@/utils/encryption'
diff --git a/web/app/signin/components/social-auth.tsx b/web/app/signin/components/social-auth.tsx
index 8a610bf093..35517a0505 100644
--- a/web/app/signin/components/social-auth.tsx
+++ b/web/app/signin/components/social-auth.tsx
@@ -1,7 +1,7 @@
-import { useSearchParams } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { API_PREFIX } from '@/config'
+import { useSearchParams } from '@/next/navigation'
 import { getPurifyHref } from '@/utils'
 import { cn } from '@/utils/classnames'
 import style from '../page.module.css'
diff --git a/web/app/signin/components/sso-auth.tsx b/web/app/signin/components/sso-auth.tsx
index 43d5d2dfe8..904403ab2c 100644
--- a/web/app/signin/components/sso-auth.tsx
+++ b/web/app/signin/components/sso-auth.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
 import Toast from '@/app/components/base/toast'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { getUserOAuth2SSOUrl, getUserOIDCSSOUrl, getUserSAMLSSOUrl } from '@/service/sso'
 import { SSOProtocol } from '@/types/feature'
 
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index 915e85ce57..ac7a7191f8 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -2,8 +2,6 @@
 import type { Locale } from '@/i18n-config'
 import { RiAccountCircleLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -15,6 +13,8 @@ import { LICENSE_LINK } from '@/constants/link'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { setLocaleOnClient } from '@/i18n-config'
 import { languages, LanguagesSupported } from '@/i18n-config/language'
+import Link from '@/next/link'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { activateMember } from '@/service/common'
 import { useInvitationCheck } from '@/service/use-common'
 import { timezones } from '@/utils/timezone'
diff --git a/web/app/signin/normal-form.tsx b/web/app/signin/normal-form.tsx
index 15d86f482c..1916dd6d1c 100644
--- a/web/app/signin/normal-form.tsx
+++ b/web/app/signin/normal-form.tsx
@@ -1,12 +1,12 @@
 import { RiContractLine, RiDoorLockLine, RiErrorWarningFill } from '@remixicon/react'
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Toast from '@/app/components/base/toast'
 import { IS_CE_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import Link from '@/next/link'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { invitationCheck } from '@/service/common'
 import { useIsLogin } from '@/service/use-common'
 import { LicenseStatus } from '@/types/feature'
diff --git a/web/app/signin/one-more-step.tsx b/web/app/signin/one-more-step.tsx
index ff28b3caaf..9363d960bf 100644
--- a/web/app/signin/one-more-step.tsx
+++ b/web/app/signin/one-more-step.tsx
@@ -1,7 +1,5 @@
 'use client'
 import type { Reducer } from 'react'
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -10,6 +8,8 @@ import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
 import { LICENSE_LINK } from '@/constants/link'
 import { languages, LanguagesSupported } from '@/i18n-config/language'
+import Link from '@/next/link'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { useOneMoreStep } from '@/service/use-common'
 import { timezones } from '@/utils/timezone'
 import Input from '../components/base/input'
@@ -78,14 +78,14 @@ const OneMoreStep = () => {
   return (
     <>
       <div className="mx-auto w-full">
-        <h2 className="title-4xl-semi-bold text-text-secondary">{t('oneMoreStep', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-1 text-text-tertiary">{t('createSample', { ns: 'login' })}</p>
+        <h2 className="text-text-secondary title-4xl-semi-bold">{t('oneMoreStep', { ns: 'login' })}</h2>
+        <p className="mt-1 text-text-tertiary body-md-regular">{t('createSample', { ns: 'login' })}</p>
       </div>
 
       <div className="mx-auto mt-6 w-full">
         <div className="relative">
           <div className="mb-5">
-            <label className="system-md-semibold my-2 flex items-center justify-between text-text-secondary">
+            <label className="my-2 flex items-center justify-between text-text-secondary system-md-semibold">
               {t('invitationCode', { ns: 'login' })}
               <Tooltip
                 popupContent={(
@@ -113,7 +113,7 @@ const OneMoreStep = () => {
             </div>
           </div>
           <div className="mb-5">
-            <label htmlFor="name" className="system-md-semibold my-2 text-text-secondary">
+            <label htmlFor="name" className="my-2 text-text-secondary system-md-semibold">
               {t('interfaceLanguage', { ns: 'login' })}
             </label>
             <div className="mt-1">
@@ -127,7 +127,7 @@ const OneMoreStep = () => {
             </div>
           </div>
           <div className="mb-4">
-            <label htmlFor="timezone" className="system-md-semibold text-text-tertiary">
+            <label htmlFor="timezone" className="text-text-tertiary system-md-semibold">
               {t('timezone', { ns: 'login' })}
             </label>
             <div className="mt-1">
@@ -150,11 +150,11 @@ const OneMoreStep = () => {
               {t('go', { ns: 'login' })}
             </Button>
           </div>
-          <div className="system-xs-regular mt-2 block w-full text-text-tertiary">
+          <div className="mt-2 block w-full text-text-tertiary system-xs-regular">
             {t('license.tip', { ns: 'login' })}
             &nbsp;
             <Link
-              className="system-xs-medium text-text-accent-secondary"
+              className="text-text-accent-secondary system-xs-medium"
               target="_blank"
               rel="noopener noreferrer"
               href={LICENSE_LINK}
diff --git a/web/app/signin/page.tsx b/web/app/signin/page.tsx
index 6f3632393c..7b3af29859 100644
--- a/web/app/signin/page.tsx
+++ b/web/app/signin/page.tsx
@@ -1,6 +1,6 @@
 'use client'
-import { useSearchParams } from 'next/navigation'
 import { useEffect } from 'react'
+import { useSearchParams } from '@/next/navigation'
 import usePSInfo from '../components/billing/partner-stack/use-ps-info'
 import NormalForm from './normal-form'
 import OneMoreStep from './one-more-step'
@@ -14,7 +14,7 @@ const SignIn = () => {
     saveOrUpdate()
   }, [])
 
-  if (step === 'next')
+  if (step === '@/next')
     return <OneMoreStep />
   return <NormalForm />
 }
diff --git a/web/app/signup/check-code/page.tsx b/web/app/signup/check-code/page.tsx
index c298c11535..49d2b4de6b 100644
--- a/web/app/signup/check-code/page.tsx
+++ b/web/app/signup/check-code/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { MailSendResponse, MailValidityResponse } from '@/service/use-common'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -9,6 +8,7 @@ import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { useMailValidity, useSendMail } from '@/service/use-common'
 
 export default function CheckCode() {
@@ -79,8 +79,8 @@ export default function CheckCode() {
         <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pb-4 pt-2">
-        <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <h2 className="text-text-primary title-4xl-semi-bold">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
+        <p className="mt-2 text-text-secondary body-md-regular">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -91,7 +91,7 @@ export default function CheckCode() {
       </div>
 
       <form action="">
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 text-text-secondary system-md-semibold">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className="mt-1" placeholder={t('checkCode.verificationCodePlaceholder', { ns: 'login' }) as string} />
         <Button loading={loading} disabled={loading} className="my-3 w-full" variant="primary" onClick={verify}>{t('checkCode.verify', { ns: 'login' })}</Button>
         <Countdown onResend={resendCode} />
@@ -103,7 +103,7 @@ export default function CheckCode() {
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/signup/components/input-mail.spec.tsx b/web/app/signup/components/input-mail.spec.tsx
index d5acc92153..e16c381585 100644
--- a/web/app/signup/components/input-mail.spec.tsx
+++ b/web/app/signup/components/input-mail.spec.tsx
@@ -24,7 +24,7 @@ const buildSystemFeatures = (overrides: SystemFeaturesOverrides = {}): SystemFea
   },
 })
 
-vi.mock('next/link', () => ({
+vi.mock('@/next/link', () => ({
   default: ({ children, href, className, target, rel }: { children: React.ReactNode, href: string, className?: string, target?: string, rel?: string }) => (
     <a href={href} className={className} target={target} rel={rel}>
       {children}
diff --git a/web/app/signup/components/input-mail.tsx b/web/app/signup/components/input-mail.tsx
index 1b88007ce4..9298050476 100644
--- a/web/app/signup/components/input-mail.tsx
+++ b/web/app/signup/components/input-mail.tsx
@@ -1,6 +1,5 @@
 'use client'
 import type { MailSendResponse } from '@/service/use-common'
-import Link from 'next/link'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -10,6 +9,7 @@ import Split from '@/app/signin/split'
 import { emailRegex } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useLocale } from '@/context/i18n'
+import Link from '@/next/link'
 import { useSendMail } from '@/service/use-common'
 
 type Props = {
@@ -52,7 +52,7 @@ export default function Form({
     }}
     >
       <div className="mb-3">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">
+        <label htmlFor="email" className="my-2 text-text-secondary system-md-semibold">
           {t('email', { ns: 'login' })}
         </label>
         <div className="mt-1">
@@ -92,11 +92,11 @@ export default function Form({
 
       {!systemFeatures.branding.enabled && (
         <>
-          <div className="system-xs-regular mt-3 block w-full text-text-tertiary">
+          <div className="mt-3 block w-full text-text-tertiary system-xs-regular">
             {t('tosDesc', { ns: 'login' })}
             &nbsp;
             <Link
-              className="system-xs-medium text-text-secondary hover:underline"
+              className="text-text-secondary system-xs-medium hover:underline"
               target="_blank"
               rel="noopener noreferrer"
               href="https://dify.ai/terms"
@@ -105,7 +105,7 @@ export default function Form({
             </Link>
             &nbsp;&&nbsp;
             <Link
-              className="system-xs-medium text-text-secondary hover:underline"
+              className="text-text-secondary system-xs-medium hover:underline"
               target="_blank"
               rel="noopener noreferrer"
               href="https://dify.ai/privacy"
diff --git a/web/app/signup/page.tsx b/web/app/signup/page.tsx
index a5a8fb40a7..fc84c90fca 100644
--- a/web/app/signup/page.tsx
+++ b/web/app/signup/page.tsx
@@ -1,7 +1,7 @@
 'use client'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import MailForm from './components/input-mail'
 
 const Signup = () => {
@@ -19,8 +19,8 @@ const Signup = () => {
   return (
     <div className="mx-auto mt-8 w-full">
       <div className="mx-auto mb-10 w-full">
-        <h2 className="title-4xl-semi-bold text-text-primary">{t('signup.createAccount', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-tertiary">{t('signup.welcome', { ns: 'login' })}</p>
+        <h2 className="text-text-primary title-4xl-semi-bold">{t('signup.createAccount', { ns: 'login' })}</h2>
+        <p className="mt-2 text-text-tertiary body-md-regular">{t('signup.welcome', { ns: 'login' })}</p>
       </div>
       <MailForm onSuccess={handleInputMailSubmitted} />
     </div>
diff --git a/web/app/signup/set-password/page.tsx b/web/app/signup/set-password/page.tsx
index 69af045f1a..c0dccd616c 100644
--- a/web/app/signup/set-password/page.tsx
+++ b/web/app/signup/set-password/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { MailRegisterResponse } from '@/service/use-common'
 import Cookies from 'js-cookie'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
@@ -9,6 +8,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import { validPassword } from '@/config'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { useMailRegister } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
 import { sendGAEvent } from '@/utils/gtag'
@@ -105,10 +105,10 @@ const ChangePasswordForm = () => {
     >
       <div className="flex flex-col md:w-[400px]">
         <div className="mx-auto w-full">
-          <h2 className="title-4xl-semi-bold text-text-primary">
+          <h2 className="text-text-primary title-4xl-semi-bold">
             {t('changePassword', { ns: 'login' })}
           </h2>
-          <p className="body-md-regular mt-2 text-text-secondary">
+          <p className="mt-2 text-text-secondary body-md-regular">
             {t('changePasswordTip', { ns: 'login' })}
           </p>
         </div>
@@ -117,7 +117,7 @@ const ChangePasswordForm = () => {
           <div>
             {/* Password */}
             <div className="mb-5">
-              <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+              <label htmlFor="password" className="my-2 text-text-secondary system-md-semibold">
                 {t('account.newPassword', { ns: 'common' })}
               </label>
               <div className="relative mt-1">
@@ -130,11 +130,11 @@ const ChangePasswordForm = () => {
                 />
 
               </div>
-              <div className="body-xs-regular mt-1 text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
+              <div className="mt-1 text-text-secondary body-xs-regular">{t('error.passwordInvalid', { ns: 'login' })}</div>
             </div>
             {/* Confirm Password */}
             <div className="mb-5">
-              <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+              <label htmlFor="confirmPassword" className="my-2 text-text-secondary system-md-semibold">
                 {t('account.confirmPassword', { ns: 'common' })}
               </label>
               <div className="relative mt-1">
diff --git a/web/context/modal-context-provider.tsx b/web/context/modal-context-provider.tsx
index 8c64642f43..a707e5425b 100644
--- a/web/context/modal-context-provider.tsx
+++ b/web/context/modal-context-provider.tsx
@@ -11,7 +11,6 @@ import type { InputVar } from '@/app/components/workflow/types'
 import type { ExpireNoticeModalPayloadProps } from '@/app/education-apply/expire-notice-modal'
 import type { ApiBasedExtension, ExternalDataTool } from '@/models/common'
 import type { ModerationConfig, PromptVariable } from '@/models/debug'
-import dynamic from 'next/dynamic'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import {
 
@@ -27,6 +26,7 @@ import {
   useAccountSettingModal,
   usePricingModal,
 } from '@/hooks/use-query-params'
+import dynamic from '@/next/dynamic'
 import { useTriggerEventsLimitModal } from './hooks/use-trigger-events-limit-modal'
 import {
   ModalContext,
diff --git a/web/context/modal-context.test.tsx b/web/context/modal-context.test.tsx
index 98f67a5473..6fac2e0cd5 100644
--- a/web/context/modal-context.test.tsx
+++ b/web/context/modal-context.test.tsx
@@ -13,7 +13,7 @@ vi.mock('@/config', async (importOriginal) => {
   }
 })
 
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useSearchParams: vi.fn(() => new URLSearchParams()),
 }))
 
diff --git a/web/context/web-app-context.tsx b/web/context/web-app-context.tsx
index c5488a565c..33679fd44f 100644
--- a/web/context/web-app-context.tsx
+++ b/web/context/web-app-context.tsx
@@ -3,12 +3,12 @@
 import type { FC, PropsWithChildren } from 'react'
 import type { ChatConfig } from '@/app/components/base/chat/types'
 import type { AppData, AppMeta } from '@/models/share'
-import { usePathname, useSearchParams } from 'next/navigation'
 import { useEffect } from 'react'
 import { create } from 'zustand'
 import { getProcessedSystemVariablesFromUrlParams } from '@/app/components/base/chat/utils'
 import Loading from '@/app/components/base/loading'
 import { AccessMode } from '@/models/access-control'
+import { usePathname, useSearchParams } from '@/next/navigation'
 import { useGetWebAppAccessModeByCode } from '@/service/use-share'
 import { useIsSystemFeaturesPending } from './global-public-context'
 
diff --git a/web/docs/test.md b/web/docs/test.md
index 0204ce0c77..8c7518d82d 100644
--- a/web/docs/test.md
+++ b/web/docs/test.md
@@ -30,7 +30,7 @@ pnpm test path/to/file.spec.tsx
 ## Project Test Setup
 
 - **Configuration**: `vitest.config.ts` sets the `jsdom` environment, loads the Testing Library presets, and respects our path aliases (`@/...`). Check this file before adding new transformers or module name mappers.
-- **Global setup**: `vitest.setup.ts` already imports `@testing-library/jest-dom`, runs `cleanup()` after every test, and defines shared mocks (for example `react-i18next`, `next/image`). Add any environment-level mocks (for example `ResizeObserver`, `matchMedia`, `IntersectionObserver`, `TextEncoder`, `crypto`) here so they are shared consistently.
+- **Global setup**: `vitest.setup.ts` already imports `@testing-library/jest-dom`, runs `cleanup()` after every test, and defines shared mocks (for example `react-i18next`, `@/next/image`). Add any environment-level mocks (for example `ResizeObserver`, `matchMedia`, `IntersectionObserver`, `TextEncoder`, `crypto`) here so they are shared consistently.
 - **Reusable mocks**: Place shared mock factories inside `web/__mocks__/` and use `vi.mock('module-name')` to point to them rather than redefining mocks in every spec.
 - **Mocking behavior**: Modules are not mocked automatically. Use `vi.mock(...)` in tests, or place global mocks in `vitest.setup.ts`.
 - **Script utilities**: `web/scripts/analyze-component.js` analyzes component complexity and generates test prompts for AI assistants. Commands:
@@ -134,7 +134,7 @@ Choose based on directory complexity:
 When using a single spec file:
 
 - ✅ **Import real project components** directly (including base components and siblings)
-- ✅ **Only mock**: API services (`@/service/*`), `next/navigation`, complex context providers
+- ✅ **Only mock**: API services (`@/service/*`), `@/next/navigation`, complex context providers
 - ❌ **DO NOT mock** base components (`@/app/components/base/*`)
 - ❌ **DO NOT mock** sibling/child components in the same directory
 
@@ -308,7 +308,7 @@ import Component from './index'
 
 // ✅ Mock external dependencies only
 vi.mock('@/service/api')
-vi.mock('next/navigation', () => ({
+vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => '/test',
 }))
diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
index 2f06800696..2ec2e450c8 100644
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -165,7 +165,14 @@ export default antfu(
     ],
     rules: {
       'no-restricted-imports': ['error', {
+        paths: [{
+          name: 'next',
+          message: 'Import Next APIs from @/next instead of next.',
+        }],
         patterns: [{
+          group: ['next/*'],
+          message: 'Import Next APIs from @/next/* instead of next/*.',
+        }, {
           group: [
             '**/portal-to-follow-elem',
             '**/portal-to-follow-elem/index',
diff --git a/web/hooks/use-import-dsl.ts b/web/hooks/use-import-dsl.ts
index 454f580b42..903fd74c5b 100644
--- a/web/hooks/use-import-dsl.ts
+++ b/web/hooks/use-import-dsl.ts
@@ -3,7 +3,6 @@ import type {
   DSLImportResponse,
 } from '@/models/app'
 import type { AppIconType } from '@/types/app'
-import { useRouter } from 'next/navigation'
 import {
   useCallback,
   useRef,
@@ -15,6 +14,7 @@ import { usePluginDependencies } from '@/app/components/workflow/plugin-dependen
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useSelector } from '@/context/app-context'
 import { DSLImportStatus } from '@/models/app'
+import { useRouter } from '@/next/navigation'
 import {
   importDSL,
   importDSLConfirm,
diff --git a/web/hooks/use-pay.tsx b/web/hooks/use-pay.tsx
index a72107daeb..5ce50fdb0f 100644
--- a/web/hooks/use-pay.tsx
+++ b/web/hooks/use-pay.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import type { IConfirm } from '@/app/components/base/confirm'
-import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Confirm from '@/app/components/base/confirm'
+import { useRouter, useSearchParams } from '@/next/navigation'
 import { useNotionBinding } from '@/service/use-common'
 
 export type ConfirmType = Pick<IConfirm, 'type' | 'title' | 'content'>
diff --git a/web/i18n-config/server.ts b/web/i18n-config/server.ts
index d9c0501d2d..e58f4a78de 100644
--- a/web/i18n-config/server.ts
+++ b/web/i18n-config/server.ts
@@ -7,9 +7,9 @@ import { camelCase } from 'es-toolkit/string'
 import { createInstance } from 'i18next'
 import resourcesToBackend from 'i18next-resources-to-backend'
 import Negotiator from 'negotiator'
-import { cookies, headers } from 'next/headers'
 import { cache } from 'react'
 import { initReactI18next } from 'react-i18next/initReactI18next'
+import { cookies, headers } from '@/next/headers'
 import { serverOnlyContext } from '@/utils/server-only-context'
 import { i18n } from '.'
 import { namespacesInFileName } from './resources'
diff --git a/web/next.config.ts b/web/next.config.ts
index e4c6663999..d2abb16a89 100644
--- a/web/next.config.ts
+++ b/web/next.config.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-imports */
 import type { NextConfig } from 'next'
 import createMDX from '@next/mdx'
 import { codeInspectorPlugin } from 'code-inspector-plugin'
diff --git a/web/next/dynamic.ts b/web/next/dynamic.ts
new file mode 100644
index 0000000000..010f7a0d78
--- /dev/null
+++ b/web/next/dynamic.ts
@@ -0,0 +1,2 @@
+/* eslint-disable no-restricted-imports */
+export { default } from 'next/dynamic'
diff --git a/web/next/font/google.ts b/web/next/font/google.ts
new file mode 100644
index 0000000000..43d4451c0b
--- /dev/null
+++ b/web/next/font/google.ts
@@ -0,0 +1,2 @@
+/* eslint-disable no-restricted-imports */
+export { Instrument_Serif } from 'next/font/google'
diff --git a/web/next/headers.ts b/web/next/headers.ts
new file mode 100644
index 0000000000..5450d74fb1
--- /dev/null
+++ b/web/next/headers.ts
@@ -0,0 +1,2 @@
+/* eslint-disable no-restricted-imports */
+export { cookies, headers } from 'next/headers'
diff --git a/web/next/image.ts b/web/next/image.ts
new file mode 100644
index 0000000000..208d0b4dbf
--- /dev/null
+++ b/web/next/image.ts
@@ -0,0 +1,2 @@
+/* eslint-disable no-restricted-imports */
+export { default } from 'next/image'
diff --git a/web/next/index.ts b/web/next/index.ts
new file mode 100644
index 0000000000..aacfc8ef94
--- /dev/null
+++ b/web/next/index.ts
@@ -0,0 +1,2 @@
+/* eslint-disable no-restricted-imports */
+export type { Viewport } from 'next'
diff --git a/web/next/link.ts b/web/next/link.ts
new file mode 100644
index 0000000000..9c95b8e224
--- /dev/null
+++ b/web/next/link.ts
@@ -0,0 +1,2 @@
+/* eslint-disable no-restricted-imports */
+export { default } from 'next/link'
diff --git a/web/next/navigation.ts b/web/next/navigation.ts
new file mode 100644
index 0000000000..dcc594e37e
--- /dev/null
+++ b/web/next/navigation.ts
@@ -0,0 +1,9 @@
+/* eslint-disable no-restricted-imports */
+export {
+  useParams,
+  usePathname,
+  useRouter,
+  useSearchParams,
+  useSelectedLayoutSegment,
+  useSelectedLayoutSegments,
+} from 'next/navigation'
diff --git a/web/next/script.ts b/web/next/script.ts
new file mode 100644
index 0000000000..0578d99b3d
--- /dev/null
+++ b/web/next/script.ts
@@ -0,0 +1,2 @@
+/* eslint-disable no-restricted-imports */
+export { default } from 'next/script'
diff --git a/web/next/server.ts b/web/next/server.ts
new file mode 100644
index 0000000000..76238bc397
--- /dev/null
+++ b/web/next/server.ts
@@ -0,0 +1,3 @@
+/* eslint-disable no-restricted-imports */
+export { NextResponse } from 'next/server'
+export type { NextRequest } from 'next/server'
diff --git a/web/proxy.ts b/web/proxy.ts
index 8d7c28153e..c25c651823 100644
--- a/web/proxy.ts
+++ b/web/proxy.ts
@@ -1,7 +1,7 @@
-import type { NextRequest } from 'next/server'
+import type { NextRequest } from '@/next/server'
 import { Buffer } from 'node:buffer'
-import { NextResponse } from 'next/server'
 import { env } from '@/env'
+import { NextResponse } from '@/next/server'
 
 const NECESSARY_DOMAIN = '*.sentry.io http://localhost:* http://127.0.0.1:* https://analytics.google.com googletagmanager.com *.googletagmanager.com https://www.google-analytics.com https://api.github.com https://api2.amplitude.com *.amplitude.com'
 
diff --git a/web/vitest.setup.ts b/web/vitest.setup.ts
index b1ff80afa3..be38b9a0f6 100644
--- a/web/vitest.setup.ts
+++ b/web/vitest.setup.ts
@@ -100,8 +100,8 @@ afterEach(async () => {
   })
 })
 
-// mock next/image to avoid width/height requirements for data URLs
-vi.mock('next/image')
+// mock @/next/image to avoid width/height requirements for data URLs
+vi.mock('@/next/image')
 
 // mock foxact/use-clipboard - not available in test environment
 vi.mock('foxact/use-clipboard', () => ({