如何使用Docker构建基于appDir（含src目录）的Next.js应用？

问题根源 #

你遇到的问题核心是Docker构建过程中没有正确复制src目录到容器内，导致Next.js在容器里找不到src/app；后来添加空pages目录后，Next.js默认优先识别pages路由体系，但你的实际路由都在src/app，所以运行时全路由404。

解决步骤 #

1. 调整next.config.js（可选但建议明确配置）
   确保启用output: "standalone"，Next.js 13+默认启用appDir体系，无需额外配置，示例如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
  reactStrictMode: true,
}

module.exports = nextConfig

2. 修正Dockerfile的文件复制逻辑
   官方with-docker示例默认只处理根目录的pages结构，你的项目用了src/app，必须确保src目录被完整复制到容器中。完整Dockerfile示例：

# Builder 阶段：构建应用
FROM node:18-alpine AS builder
WORKDIR /app

# 先复制依赖文件，利用Docker缓存优化构建速度
COPY package*.json ./
RUN npm ci

# 复制整个项目目录（包括src）
COPY . .

# 执行构建
RUN npm run build

# Runner 阶段：运行生产环境应用
FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production

# 复制standalone构建产物（Next.js独立运行所需的核心文件）
COPY --from=builder /app/.next/standalone ./

# 复制静态资源和public目录
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

# 暴露端口
EXPOSE 3000

# 启动应用
CMD ["node", "server.js"]

3. 清理干扰项
   删掉你之前创建的空pages目录，避免Next.js混淆路由体系。

验证 #

按上述配置重新构建镜像并运行，容器内的Next.js会正确识别src/app目录，路由即可正常访问。

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