Next 13.4.1构建后JS/CSS/图片加载404问题求助

部署Next.js 13应用时，构建过程无报错，但加载页面仅显示HTML，JS、CSS及图片全部返回404（可通过浏览器网络面板查看）：

• 应用尝试从_next路径加载资源，比如http://localhost:3000/_next/static/chunks/522-b7eb9fb4e38abfae.js，但该路径不存在
• 图片从根路径加载，比如http://localhost:3000/assets/login.png，同样返回404

应用目录结构：

My-app
|_ public
  |_ assets/
    |_[所有图片文件]
|_ nodemodules
|_ .next
|_ out
|_ src
  |_ app
|_ Dockerfile
|_ next.config.js
|_ package.json

相关配置文件：

next.config.js #

module.exports = {
  basePath: "",
  output: "standalone",
  experimental: {
    appDir: true,
  },
  images: {
    domains: [
      "localhost",
      "localhost:3001",
      "my-exapmle-domain.com",
    ],
  },
};

Dockerfile #

#Using a different image, below is just an example
FROM node:16_alpine-3.16 AS prebuild

USER root

WORKDIR /app

ARG env 
ENV NODE_ENV=${env}

RUN apk add --no-cache libc6-compat
RUN apk add --update npm

COPY package.json ./
COPY package-lock.json ./
RUN npm i --legacy-peer-deps

COPY . .

RUN npm run build

#Using a different image, below is just an example
FROM node:16_alpine-3.16

USER root

WORKDIR /app

ENV NEXT_TELEMETRY_DISABLED 1
ENV UID=10101
ENV GID=10101

## create & switch to non-root user
RUN apk add shadow
RUN /usr/sbin/groupadd -g ${GID} docker
RUN /usr/sbin/useradd -s /bin/sh -g ${GID} -u ${UID} limsuinext

USER 10101

COPY --from=prebuild /app/next.config.js ./
COPY --from=prebuild /app/package.json ./package.json
COPY --from=prebuild /app/.next ./.next
COPY --from=prebuild /app/node_modules ./node_modules
COPY --from=prebuild /app/public/ ./public


COPY --from=prebuild --chown=10101 /app/.next/standalone ./
COPY --from=prebuild --chown=10101 /app/.next/static ./.next/static
COPY --from=prebuild --chown=10101 /app/.next/static ./.next/standalone/static
COPY --from=prebuild --chown=10101 /app/.next/out ./.next/standalone/out


# Fire up node server
ENV PORT 3001
EXPOSE 3001
# CMD ["node", ".next/standalone/server.js"]  Old approach
CMD ["node", "server.js"]

package.json #

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "PORT=3001 npx next dev",
    "build": "npx next build",
    "start": "PORT=3001 next start",
    "lint": "next lint"
  },
  "dependencies": {...},
  "devDependencies": {...}
}

1. 修复Dockerfile的静态资源复制逻辑 #

当Next.js启用output: "standalone"时，构建后的核心服务文件在.next/standalone目录，必须把public和.next/static目录复制到standalone对应的位置，否则服务器找不到静态资源。原Dockerfile的复制逻辑混乱，按下面修正：

USER 10101

# 仅复制standalone模式必需的文件
COPY --from=prebuild --chown=10101 /app/next.config.js ./
COPY --from=prebuild --chown=10101 /app/public ./public
COPY --from=prebuild --chown=10101 /app/.next/static ./.next/static
COPY --from=prebuild --chown=10101 /app/.next/standalone ./

# Fire up node server
ENV PORT 3001
EXPOSE 3001
CMD ["node", "server.js"]

2. 统一端口访问 #

应用配置的端口是3001，但你访问用的是3000，导致资源路径不匹配。要么用http://localhost:3001访问，要么把所有配置里的端口改成一致。

3. 验证文件权限与结构 #

• 进入容器检查standalone目录下是否存在public和.next/static文件夹
• 确认10101用户对这些文件夹有读取权限，必要时调整文件权限

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