Next.js - 静态文件服务

Next.js - 提供静态文件

Next.js 使您能够轻松地直接从项目根目录下的 public 目录提供静态资源（如图片、字体、样式表或验证文件）。

public 目录内的文件会映射到您应用的根 URL (/)。

public/my-image.png 可以通过 /my-image.png 访问。
public/css/style.css 可以通过 /css/style.css 访问。
public/robots.txt 可以通过 /robots.txt 访问。

这种机制非常适合不需要处理或打包的资源，例如 logo、favicon 或与 SEO（搜索引擎优化）相关的文件，如 robots.txt 和网站验证文件。

示例：添加 Logo

如果项目根目录中不存在 public 目录，请创建它。
将一个图片文件放入其中，例如 logo.svg。
您现在可以在组件中使用根相对路径 (/) 引用此图片。为了获得更好的优化和可访问性，建议使用 next/image 组件。

让我们更新一个页面（例如 app/page.tsx）来显示 logo：

import Link from 'next/link';
import Image from 'next/image'; // 导入 next/image 组件

export default function HomePage() {
  return (
    <main style={{ padding: '20px' }}>
      <h1>Welcome to Our Site!</h1>
      <p>Powered by Next.js</p>

      {/* 使用 next/image 进行优化 */}
      <Image
        src="/logo.svg" // 相对于 public 目录的路径
        alt="Our Company Logo"
        width={150}      // 必填宽度
        height={50}     // 必填高度
        priority        // 可选：如果图片在首屏，则提前加载
      />

      <br />
      <Link href="/about">About Us</Link>
    </main>
  );
}

为什么使用 next/image？

**自动优化：**以现代格式（如 WebP）提供图片，并为不同设备调整尺寸。
**防止布局偏移：**在图片加载时自动预留空间。
**加载更快：**优化图片以提高性能。

虽然您可以使用标准的 <img> 标签（<img src="/logo.svg" alt="...">），但 next/image 组件提供了显著的优势。

启动开发服务器

运行开发服务器：

npm run dev

验证输出

在浏览器中打开 http://localhost:3000。您应该能看到您的首页内容以及直接从 public 目录提供的 logo 图片 (logo.svg)。

public 目录也是放置 robots.txt（用于指示网络爬虫）或 favicon.ico（浏览器标签页中显示的小图标）等文件的正确位置。