fix: Add basePath prefix to all static asset paths for GitHub Pages

Next.js Image component does not auto-prepend basePath in unoptimized
export mode. Expose NEXT_PUBLIC_BASE_PATH via env config and prefix
all icon/image src paths to fix 404s on GitHub Pages deployment.

Author: Jason-chen-coder

apps/web/next.config.ts

@@ -2,11 +2,17 @@ import type { NextConfig } from "next";
 
 const isGithubPages = process.env.GITHUB_PAGES === 'true';
 
+const basePath = isGithubPages ? '/DocStudio' : '';
+
 const nextConfig: NextConfig = {
   // GitHub Pages 使用静态导出，Docker 部署使用 standalone 模式
   output: isGithubPages ? 'export' : 'standalone',
   // GitHub Pages 部署在子路径 /DocStudio 下
-  basePath: isGithubPages ? '/DocStudio' : '',
+  basePath,
+  // 将 basePath 暴露给客户端代码，用于静态资源路径拼接
+  env: {
+    NEXT_PUBLIC_BASE_PATH: basePath,
+  },
   images: {
     // GitHub Pages 不支持 next/image 优化，需要关闭
     unoptimized: isGithubPages,

apps/web/src/app/(public)/share/[token]/page.tsx

@@ -102,7 +102,7 @@ function ShareHeader({ title }: { title?: string }) {
             title="返回首页"
           >
             <Image
-              src="/docStudio_icon.png"
+              src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/docStudio_icon.png`}
               alt="DocStudio"
               width={28}
               height={28}

apps/web/src/app/auth/layout.tsx

@@ -19,7 +19,7 @@ export default function AuthLayout({
         <header className="flex items-center justify-between px-6 sm:px-10 py-5">
           <a href="/" className="flex items-center gap-2.5">
             <Image
-              src="/docStudio_icon.png"
+              src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/docStudio_icon.png`}
               alt="DocStudio"
               width={30}
               height={30}

apps/web/src/app/contact/page.tsx

@@ -147,7 +147,7 @@ function WeChatCard() {
           >
             <div className="bg-white dark:bg-[#1C1C20] rounded-2xl shadow-xl shadow-black/10 dark:shadow-black/50 border border-gray-200/80 dark:border-white/[0.08] p-3 flex flex-col items-center gap-2">
               <Image
-                src="/we_chat.png"
+                src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/we_chat.png`}
                 alt="微信二维码"
                 width={960}
                 height={960}

apps/web/src/app/layout.tsx

@@ -58,7 +58,7 @@ export const metadata: Metadata = {
     follow: true,
   },
   icons: {
-    icon: '/docStudio_icon.png',
+    icon: `${process.env.NEXT_PUBLIC_BASE_PATH || ''}/docStudio_icon.png`,
   },
 };
 

apps/web/src/app/page.tsx

@@ -777,7 +777,7 @@ export default function Home() {
             {/* Brand */}
             <div className="flex flex-col gap-3">
               <div className="flex items-center gap-2.5">
-                <Image src="/docStudio_icon.png" alt="DocStudio" width={22} height={22} style={{ width: 22, height: 'auto' }} />
+                <Image src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/docStudio_icon.png`} alt="DocStudio" width={22} height={22} style={{ width: 22, height: 'auto' }} />
                 <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">DocStudio</span>
               </div>
               <p className="text-[13px] text-gray-500 dark:text-gray-500 leading-relaxed max-w-[220px]">

apps/web/src/app/public/spaces/[id]/layout.tsx

@@ -124,7 +124,7 @@ export default function PublicSpaceLayout({
 
                 <div className="flex items-center gap-3">
                     <Link href="/" className="flex items-center gap-2">
-                        <Image src="/docStudio_icon.png" alt="DocStudio" width={24} height={24} />
+                        <Image src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/docStudio_icon.png`} alt="DocStudio" width={24} height={24} />
                         <span className="font-semibold text-gray-900 dark:text-white hidden sm:inline-block">DocStudio</span>
                     </Link>
                 </div>

apps/web/src/components/layout/public-header.tsx

@@ -84,7 +84,7 @@ export function PublicHeader() {
             <div className="px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between max-w-7xl mx-auto">
                 <div className="flex-1 flex justify-start">
                     <Link href="/" className="flex items-center gap-3 relative group">
-                        <Image src="/docStudio_icon.png" alt="DocStudio" width={32} height={32} style={{ width: 32, height: 'auto' }} />
+                        <Image src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/docStudio_icon.png`} alt="DocStudio" width={32} height={32} style={{ width: 32, height: 'auto' }} />
 
                         {/* Wrapper for smooth cross-fade of gradient text */}
                         <div className="relative flex items-center">

apps/web/src/components/layout/sidebar.tsx

@@ -91,7 +91,7 @@ export function Sidebar() {
     <aside className="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex-shrink-0 flex flex-col h-full">
       <div className="h-16 flex items-center gap-3 px-6 border-b border-gray-200 dark:border-gray-700">
         <Image
-          src="/docStudio_icon.png"
+          src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/docStudio_icon.png`}
           alt="DocStudio"
           width={32}
           height={32}

apps/web/src/components/ui/loading-screen.tsx

@@ -26,7 +26,7 @@ export function LoadingScreen({ className }: LoadingScreenProps) {
         {/* Center Icon (Logo) */}
         <div className="absolute flex items-center justify-center z-10 bg-white dark:bg-gray-900 rounded-full p-1">
           <Image
-            src="/docStudio_icon.png"
+            src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/docStudio_icon.png`}
             alt="DocStudio Logo"
             width={20}
             height={20}