编辑“︁Next.js静态资源处理”︁（章节）

= Next.js静态资源处理 =

== 介绍 ==
静态资源处理是Next.js框架的核心功能之一，用于高效管理图片、字体、样式表等非动态内容。Next.js通过特殊目录结构和优化技术（如图像自动优化）简化了静态资源的引用和交付流程。

== 静态资源目录 ==
Next.js约定将静态资源存放在项目根目录下的<code>public</code>文件夹中：
```bash
my-next-app/
├── public/
│   ├── images/
│   ├── favicon.ico
│   └── robots.txt
└── pages/
```

=== 基础引用方式 ===
通过绝对路径直接引用，路径以<code>/</code>开头指向<code>public</code>目录：
<syntaxhighlight lang="jsx">
// 引用 public/images/logo.png
function Header() {
  return <img src="/images/logo.png" alt="Logo" />;
}
</syntaxhighlight>

== 高级处理技术 ==

=== 图像优化 ===
Next.js提供<code>next/image</code>组件实现自动优化：
<syntaxhighlight lang="jsx">
import Image from 'next/image';

function OptimizedImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Hero Image"
      width={1200}
      height={800}
      quality={75}
    />
  );
}
</syntaxhighlight>
{| class="wikitable"
|+ 图像组件属性说明
! 属性 !! 作用 !! 推荐值
|-
| width || 渲染宽度 || 实际显示像素值
|-
| height || 渲染高度 || 实际显示像素值
|-
| quality || 压缩质量 || 75-85
|}

=== 资源指纹处理 ===
生产构建时会自动添加内容哈希：
<mermaid>
graph LR
    A[原始文件: logo.png] --> B[构建后: logo-a1b2c3.png]
    B --> C[长期缓存优化]
</mermaid>

== 实际应用案例 ==

=== 字体加载优化 ===
通过<code>public</code>目录托管WOFF2字体：
<syntaxhighlight lang="css">
/* styles/globals.css */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}
</syntaxhighlight>

=== 第三方脚本管理 ===
将第三方库放入public目录后通过脚本引入：
<syntaxhighlight lang="html">
<!-- pages/_document.js -->
<script src="/libs/analytics.js" strategy="afterInteractive" />
</syntaxhighlight>

== 性能优化原理 ==
Next.js静态资源处理基于以下数学优化模型：
<math>
T_{load} = \frac{S_{resource}}{B_{width}} + R_{TT} \times N_{requests}
</math>
其中：
* <math>T_{load}</math> = 总加载时间
* <math>S_{resource}</math> = 资源大小
* <math>B_{width}</math> = 带宽
* <math>R_{TT}</math> = 往返延迟
* <math>N_{requests}</math> = 请求次数

== 最佳实践 ==
1. 将静态资源分类存储（如<code>/public/images</code>, <code>/public/fonts</code>）
2. 对超过1MB的资源考虑CDN托管
3. 使用<code>next/image</code>自动转换WebP格式
4. 通过<code>assetPrefix</code>配置CDN地址

== 故障排查 ==
{| class="wikitable"
! 问题现象 !! 可能原因 !! 解决方案
|-
| 404资源错误 || 路径不以<code>/</code>开头 || 检查是否使用绝对路径
|-
| 图像变形 || 未设置width/height || 添加尺寸属性
|-
| 字体未加载 || 格式声明错误 || 检查<code>format()</code>声明
|}

== 参见 ==
• [[Next.js路由系统]]
• [[Next.js API路由]]
• [[Web性能优化基础]]

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js基础]]