Next.js - 静态文件服务

---

在 Next.js 中，我们可以通过将图像等静态页面放在顶级目录public中来非常轻松地提供它们。我们可以像页面目录中的页面一样以类似的方式引用这些文件。

在 Next.js 中，页面是一个 React 组件，并从页面目录导出。每个页面都根据其文件名与一个路径相关联。

让我们更新Pages章节中使用的 nextjs 项目。

创建公共目录并将所有图像放入其中。我们拍摄了 logo.png，TutorialsPoint 徽标图像。

更新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 站点验证或网络应用程序中的任何其他静态资产。