Next.js App Router服务端组件Docker构建时无法调用本地API

Docker构建Next.js应用时，预渲染阶段会执行服务端组件的代码，但此时你的本地API服务（http://localhost:3001）并没有在构建容器内运行，所以fetch请求必然失败。本地开发时正常是因为Next.js开发服务器同时托管了API路由和页面，请求能正常到达。

方案1：直接复用API逻辑（推荐） #

既然服务端组件和API路由都运行在服务端，没必要通过HTTP请求绕一圈，直接把获取图片URL的逻辑封装成公共函数，在服务端组件和API路由里共用：

1. 创建公共工具函数：

// lib/firebase-image.js
import { getDownloadURL, ref } from "firebase/storage";
import { storage } from "@/firebase/storage";

export async function getImageDownloadUrl(path) {
  return await getDownloadURL(ref(storage, path));
}

2. 修改API路由代码，复用这个函数：

// app/api/fetch-image/route.js
import { NextResponse } from 'next/server'
import { getImageDownloadUrl } from '@/lib/firebase-image';

export async function GET(Request) {
    const url = new URL(Request.url)
    const path = url.searchParams.get("path")
    const image_url = await getImageDownloadUrl(path)
    return NextResponse.json({data: image_url}, {status: 200})
}

3. 修改服务端组件里的调用代码，直接用公共函数：

import { getImageDownloadUrl } from '@/lib/firebase-image';

async function fetchSingleImage(path) {
    return await getImageDownloadUrl(path);
}

这样构建时不需要依赖外部API服务，直接执行逻辑就能拿到图片URL，避免预渲染失败。

方案2：强制页面动态渲染（不推荐，影响性能） #

如果必须保留HTTP调用API的方式，可以让页面跳过预渲染，改为动态渲染。在对应的page.js文件顶部添加动态渲染配置：

// app/page.js 或 app/photos/page.js
export const dynamic = "force-dynamic";

这样构建时不会预渲染该页面，而是在用户请求页面时才执行服务端组件代码，此时API服务已经启动，能正常响应请求。但这种方式会失去静态生成的性能优势，仅适合特殊场景。

内容的提问来源于stack exchange，提问作者Xun Ruan