feat(add-base-path): 支持配置basePath以部署到子路径

app/about/cn/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 import { FaGithub } from "react-icons/fa"
+import nextConfig from "@/next.config"
 
 export const metadata: Metadata = {
     title: "关于 - Next AI Draw.io",
@@ -270,7 +271,7 @@ export default function AboutCN() {
                                 <strong>动画连接器</strong>的Transformer架构图。
                             </p>
                             <Image
-                                src="/animated_connectors.svg"
+                                src={`${nextConfig.basePath}/animated_connectors.svg`}
                                 alt="带动画连接器的Transformer架构"
                                 width={480}
                                 height={360}
@@ -290,7 +291,7 @@ export default function AboutCN() {
                                     生成一个GCP架构图。用户连接到托管在实例上的前端。
                                 </p>
                                 <Image
-                                    src="/gcp_demo.svg"
+                                    src={`${nextConfig.basePath}/gcp_demo.svg`}
                                     alt="GCP架构图"
                                     width={400}
                                     height={300}
@@ -307,7 +308,7 @@ export default function AboutCN() {
                                     生成一个AWS架构图。用户连接到托管在实例上的前端。
                                 </p>
                                 <Image
-                                    src="/aws_demo.svg"
+                                    src={`${nextConfig.basePath}/aws_demo.svg`}
                                     alt="AWS架构图"
                                     width={400}
                                     height={300}
@@ -324,7 +325,7 @@ export default function AboutCN() {
                                     生成一个Azure架构图。用户连接到托管在实例上的前端。
                                 </p>
                                 <Image
-                                    src="/azure_demo.svg"
+                                    src={`${nextConfig.basePath}/azure_demo.svg`}
                                     alt="Azure架构图"
                                     width={400}
                                     height={300}
@@ -340,7 +341,7 @@ export default function AboutCN() {
                                     给我画一只可爱的猫。
                                 </p>
                                 <Image
-                                    src="/cat_demo.svg"
+                                    src={`${nextConfig.basePath}/cat_demo.svg`}
                                     alt="猫咪绘图"
                                     width={240}
                                     height={240}

app/about/ja/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 import { FaGithub } from "react-icons/fa"
+import nextConfig from "@/next.config"
 
 export const metadata: Metadata = {
     title: "概要 - Next AI Draw.io",
@@ -280,7 +281,7 @@ export default function AboutJA() {
                                 付きのTransformerアーキテクチャ図を作成してください。
                             </p>
                             <Image
-                                src="/animated_connectors.svg"
+                                src={`${nextConfig.basePath}/animated_connectors.svg`}
                                 alt="アニメーションコネクタ付きTransformerアーキテクチャ"
                                 width={480}
                                 height={360}
@@ -300,7 +301,7 @@ export default function AboutJA() {
                                     を使用してGCPアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                 </p>
                                 <Image
-                                    src="/gcp_demo.svg"
+                                    src={`${nextConfig.basePath}/gcp_demo.svg`}
                                     alt="GCPアーキテクチャ図"
                                     width={400}
                                     height={300}
@@ -317,7 +318,7 @@ export default function AboutJA() {
                                     を使用してAWSアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                 </p>
                                 <Image
-                                    src="/aws_demo.svg"
+                                    src={`${nextConfig.basePath}/aws_demo.svg`}
                                     alt="AWSアーキテクチャ図"
                                     width={400}
                                     height={300}
@@ -334,7 +335,7 @@ export default function AboutJA() {
                                     を使用してAzureアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                 </p>
                                 <Image
-                                    src="/azure_demo.svg"
+                                    src={`${nextConfig.basePath}/azure_demo.svg`}
                                     alt="Azureアーキテクチャ図"
                                     width={400}
                                     height={300}
@@ -350,7 +351,7 @@ export default function AboutJA() {
                                     かわいい猫を描いてください。
                                 </p>
                                 <Image
-                                    src="/cat_demo.svg"
+                                    src={`${nextConfig.basePath}/cat_demo.svg`}
                                     alt="猫の絵"
                                     width={240}
                                     height={240}

app/about/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 import { FaGithub } from "react-icons/fa"
+import nextConfig from "@/next.config"
 
 export const metadata: Metadata = {
     title: "About - Next AI Draw.io",
@@ -301,7 +302,7 @@ export default function About() {
                                 transformer's architecture.
                             </p>
                             <Image
-                                src="/animated_connectors.svg"
+                                src={`${nextConfig.basePath}/animated_connectors.svg`}
                                 alt="Transformer Architecture with Animated Connectors"
                                 width={480}
                                 height={360}
@@ -322,7 +323,7 @@ export default function About() {
                                     a frontend hosted on an instance.
                                 </p>
                                 <Image
-                                    src="/gcp_demo.svg"
+                                    src={`${nextConfig.basePath}/gcp_demo.svg`}
                                     alt="GCP Architecture Diagram"
                                     width={400}
                                     height={300}
@@ -340,7 +341,7 @@ export default function About() {
                                     a frontend hosted on an instance.
                                 </p>
                                 <Image
-                                    src="/aws_demo.svg"
+                                    src={`${nextConfig.basePath}/aws_demo.svg`}
                                     alt="AWS Architecture Diagram"
                                     width={400}
                                     height={300}
@@ -358,7 +359,7 @@ export default function About() {
                                     to a frontend hosted on an instance.
                                 </p>
                                 <Image
-                                    src="/azure_demo.svg"
+                                    src={`${nextConfig.basePath}/azure_demo.svg`}
                                     alt="Azure Architecture Diagram"
                                     width={400}
                                     height={300}
@@ -374,7 +375,7 @@ export default function About() {
                                     me.
                                 </p>
                                 <Image
-                                    src="/cat_demo.svg"
+                                    src={`${nextConfig.basePath}/cat_demo.svg`}
                                     alt="Cat Drawing"
                                     width={240}
                                     height={240}

components/chat-example-panel.tsx

@@ -8,6 +8,7 @@ import {
     Terminal,
     Zap,
 } from "lucide-react"
+import nextConfig from "@/next.config"
 
 interface ExampleCardProps {
     icon: React.ReactNode
@@ -74,7 +75,7 @@ export default function ExamplePanel({
         setInput("Replicate this flowchart.")
 
         try {
-            const response = await fetch("/example.png")
+            const response = await fetch(`${nextConfig.basePath}/example.png`)
             const blob = await response.blob()
             const file = new File([blob], "example.png", { type: "image/png" })
             setFiles([file])
@@ -87,7 +88,9 @@ export default function ExamplePanel({
         setInput("Replicate this in aws style")
 
         try {
-            const response = await fetch("/architecture.png")
+            const response = await fetch(
+                `${nextConfig.basePath}/architecture.png`,
+            )
             const blob = await response.blob()
             const file = new File([blob], "architecture.png", {
                 type: "image/png",
@@ -102,7 +105,9 @@ export default function ExamplePanel({
         setInput("Summarize this paper as a diagram")
 
         try {
-            const response = await fetch("/chain-of-thought.txt")
+            const response = await fetch(
+                `${nextConfig.basePath}/chain-of-thought.txt`,
+            )
             const blob = await response.blob()
             const file = new File([blob], "chain-of-thought.txt", {
                 type: "text/plain",

components/chat-message-display.tsx

@@ -34,6 +34,7 @@ import {
     replaceNodes,
     validateAndFixXml,
 } from "@/lib/utils"
+import nextConfig from "@/next.config"
 import ExamplePanel from "./chat-example-panel"
 import { CodeBlock } from "./code-block"
 
@@ -291,7 +292,7 @@ export function ChatMessageDisplay({
         setFeedback((prev) => ({ ...prev, [messageId]: value }))
 
         try {
-            await fetch("/api/log-feedback", {
+            await fetch(`${nextConfig.basePath}/api/log-feedback`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({

components/chat-panel.tsx

@@ -27,6 +27,7 @@ import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
 import { useQuotaManager } from "@/lib/use-quota-manager"
 import { formatXML, isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
+import nextConfig from "@/next.config"
 import { ChatMessageDisplay } from "./chat-message-display"
 
 // localStorage keys for persistence
@@ -150,7 +151,7 @@ export default function ChatPanel({
 
     // Check config on mount
     useEffect(() => {
-        fetch("/api/config")
+        fetch(`${nextConfig.basePath}/api/config`)
             .then((res) => res.json())
             .then((data) => {
                 setAccessCodeRequired(data.accessCodeRequired)
@@ -225,7 +226,7 @@ export default function ChatPanel({
         setMessages,
     } = useChat({
         transport: new DefaultChatTransport({
-            api: "/api/chat",
+            api: `${nextConfig.basePath}/api/chat`,
         }),
         async onToolCall({ toolCall }) {
             if (DEBUG) {

components/settings-dialog.tsx

@@ -20,6 +20,7 @@ import {
     SelectValue,
 } from "@/components/ui/select"
 import { Switch } from "@/components/ui/switch"
+import nextConfig from "@/next.config"
 
 interface SettingsDialogProps {
     open: boolean
@@ -71,7 +72,7 @@ export function SettingsDialog({
         // Only fetch if not cached in localStorage
         if (getStoredAccessCodeRequired() !== null) return
 
-        fetch("/api/config")
+        fetch(`${nextConfig.basePath}/api/config`)
             .then((res) => {
                 if (!res.ok) throw new Error(`HTTP ${res.status}`)
                 return res.json()
@@ -119,12 +120,15 @@ export function SettingsDialog({
         setIsVerifying(true)
 
         try {
-            const response = await fetch("/api/verify-access-code", {
-                method: "POST",
-                headers: {
-                    "x-access-code": accessCode.trim(),
+            const response = await fetch(
+                `${nextConfig.basePath}/api/verify-access-code`,
+                {
+                    method: "POST",
+                    headers: {
+                        "x-access-code": accessCode.trim(),
+                    },
                 },
-            })
+            )
 
             const data = await response.json()
 

contexts/diagram-context.tsx

@@ -5,6 +5,7 @@ import { createContext, useContext, useRef, useState } from "react"
 import type { DrawIoEmbedRef } from "react-drawio"
 import { STORAGE_DIAGRAM_XML_KEY } from "@/components/chat-panel"
 import type { ExportFormat } from "@/components/save-dialog"
+import nextConfig from "@/next.config"
 import { extractDiagramXML, validateAndFixXml } from "../lib/utils"
 
 interface DiagramContextType {
@@ -284,7 +285,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         sessionId?: string,
     ) => {
         try {
-            await fetch("/api/log-save", {
+            await fetch(`${nextConfig.basePath}/api/log-save`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({ filename, format, sessionId }),

docker-compose.yml

@@ -8,5 +8,7 @@ services:
       args:
         - NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
     ports: ["3000:3000"]
+    environment:
+      - NEXT_PUBLIC_BASE_PATH=/nextaidrawio
     env_file: .env
-    depends_on: [drawio]
+    depends_on: [drawio]

next.config.ts

@@ -3,6 +3,7 @@ import type { NextConfig } from "next"
 const nextConfig: NextConfig = {
     /* config options here */
     output: "standalone",
+    basePath: process.env.NEXT_PUBLIC_BASE_PATH || "",
 }
 
 export default nextConfig