首页 > 网络编程 > JavaScript > javascript类库 > React > React中Next.js与public

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

2026-03-06 08:20:55 作者：dbt@L

React作为当前前端开发领域最流行的框架之一,组件化开发是其核心概念之一,下面这篇文章主要介绍了React中Next.js静态资源与public目录的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

问题场景

部署 Next.js 应用后，发现所有图片都显示不出来，页面上一片空白图标。本地开发明明是好的，为什么部署后就不行了？

理解 Next.js 的构建产物

Next.js 使用 output: 'standalone' 模式构建时，会生成一个独立的部署包：

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

问题来了：public 目录和 .next/static 目录不会自动包含进去！

public 目录是什么？

public 目录用于存放静态资源，如图片、字体、favicon 等：

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"  />

为什么部署后图片不显示？

使用 standalone 模式时，官方文档明确说明：

public 和 .next/static 目录需要手动复制到 standalone 目录

构建后需要手动操作：

# 构建
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/

使用 Docker 时的处理

如果用 Docker 部署，需要在 Dockerfile 中添加复制步骤：

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"

static 和 public 的区别

目录	内容	来源
`public/`	原始静态资源	开发者手动放入
`.next/static/`	编译后的 JS/CSS	Next.js 构建生成

两者都需要复制，缺一不可：

缺 public → 图片、字体不显示
缺 .next/static → 页面样式和交互失效

常见问题排查

1. 图片路径正确但不显示

检查 standalone/public 目录是否存在且包含图片文件。

2. 本地正常，部署后异常

确认部署流程是否包含复制静态资源的步骤。

3. 部分图片显示，部分不显示

检查图片文件名是否有特殊字符或中文，建议使用英文命名。

总结

步骤	说明
1	`npm run build` 构建项目
2	复制 `public` 到 `standalone/public`
3	复制 `.next/static` 到 `standalone/.next/static`
4	部署 `standalone` 目录

记住这个口诀：standalone 模式，静态资源要手动复制。这是 Next.js 官方设计，目的是让部署包尽可能精简，由开发者按需添加资源。

到此这篇关于React中Next.js静态资源与public目录的文章就介绍到这了,更多相关React中Next.js与public内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！