📅  最后修改于: 2020-10-22 06:44:22             🧑  作者: Mango
在Next.js中,我们可以通过将静态页面(例如图像)放置在public (顶层目录)中来轻松地为其提供服务。我们可以以类似的方式引用这些文件,例如页面目录中的页面。
在Next.js中,页面是React组件,并从pages目录导出。每个页面都基于其文件名与路由关联。
让我们更新“页面”一章中使用的nextjs项目。
创建公共目录并在其中放置任何图像。我们采取了TutorialsPoint徽标图像logo.png。
更新first.js如下-
import Link from 'next/link'
export default function FirstPost() {
return (
<>
My First Post
Home
>
)
}
在这里,我们在index.js文件中添加了对logo.png的引用。
运行以下命令以启动服务器-。
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目的的情况下,公共目录也很有用。它可用于robot.txt,Google Site验证或Web应用程序中的任何其他静态资产。