React中Next.js静态资源与public目录示例详解

.next/
└── standalone/        ← 部署包
    ├── server.js      ← 启动文件
    ├── node_modules/  ← 精简的依赖
    └── .next/         ← 编译后的代码

project/
├── public/
│   ├── images/
│   │   ├── logo.png
│   │   └── banner.jpg
│   ├── fonts/
│   │   └── custom.woff2
│   └── favicon.ico
└── src/

// 引用 public/images/logo.png
<img src="/images/logo.png" alt="Logo" />

// 引用 public/favicon.ico
<link rel="icon" href="/favicon.ico" rel="external nofollow"  />

# 构建
npm run build

# 复制静态资源（必须！）
cp -r public .next/standalone/public
cp -r .next/static .next/standalone/.next/static

.next/standalone/
├── server.js
└── .next/
    └── server/     ← 只有服务端代码

.next/standalone/
├── server.js
├── public/           ← 手动复制
│   └── images/
│       └── logo.png
└── .next/
    ├── server/
    └── static/       ← 手动复制
        └── chunks/

FROM node:18-alpine

WORKDIR /app

# 复制构建产物
COPY .next/standalone ./

# 复制静态资源（关键步骤！）
COPY public ./public
COPY .next/static ./.next/static

EXPOSE 3000
CMD ["node", "server.js"]

#!/bin/bash

# 1. 构建
npm run build

# 2. 复制静态资源到 standalone
cp -r public .next/standalone/public
cp -r .next/static .next/standalone/.next/static

# 3. 打包部署
cd .next/standalone
tar -czf deploy.tar.gz .

echo "部署包已生成: .next/standalone/deploy.tar.gz"