Next.js 静态文件服务
在 Next.js 中，我们可以通过将静态页面放在顶级目录
public 中来非常轻松地提供像图像这样的静态页面。我们可以像
pages 目录中的页面一样以类似的方式引用这些文件。
在 Next.js 中，页面是一个 React 组件，从 pages 目录导出。每个页面都根据其文件名与一个路由相关联。
让我们更新页面章节中使用的nextjs项目。
创建公共目录并在其中放置任何图像。我们已经拍摄了 logo.png、Lidihuo 标志图片。
按如下方式更新 first.js-
import Link from 'next/link'
export default function FirstPost() {
return (
<>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
<br/">
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
这里我们在 index.js 文件中添加了对 logo.png 的引用。
启动 Next.js 服务器
运行以下命令启动服务器-。
npm run dev
> nextjs@1.0.0 dev \Node\nextjs
> next
ready-started server on http://localhost:3000
event-compiled successfully
event-build page: /
wait -compiling...
event-compiled successfully
event-build page: /next/dist/pages/_error
wait -compiling...
event-compiled successfully
验证输出
在浏览器中打开 localhost:3000，您将看到输出。
公共目录在 SEO 目的的情况下也很有用。它可用于 robots.txt、Google 站点验证或网络应用程序中的任何其他静态资产。
