在 Next.js 中有效地构建 SEO 和页面格式

组织 Next.js 应用程序并使用组件。

想象一下，您想使用 Next.js 构建一个应用程序，并且您希望每个页面都有不同的 SEO 策略以及相同的页眉、页脚和导航栏。

你能做到什么？

简单的选择是构建一个在每个页面上重复调用的共享组件。

但是，你可以试试这个

我希望您在阅读本文之前已经开发了 Next.js 应用程序。
如果没有，请访问此页面 https://nextjs.org/docs/getting-started
创建两个具有名称的组件格式和 SEO设置 在 src 目录中名为 components 的新文件夹中。
这个组件，“ 格式 ,”指的是页面的布局。
在这里，在这种情况下，每个页面的布局将在此流程中导航栏，然后是主要内容，然后是页脚。
而且，我们因此在下面定义它

从“反应”导入 { FC }；从'../Footer'导入页脚；
从'../Navbar'导入导航栏； const 格式：FC = (props) => {
返回（
<>

{props.children}

); }; 导出默认格式；
在 SEO设置 ，我们实际上是在构建一个通用标签，其中数据作为元和标题标签字段的道具提供。
这样我们就可以利用这个 SEO设置 每次我们需要在页面上定义 SEO 相关信息而不是创建一个头反复标记。

从“下一个/头”导入头；导出接口元数据 {
标题：字符串；
描述：字符串；
} 常量 SEOSetup: FC =（道具）=> {
常量 {
标题，
描述，
} = 道具；返回（
{标题} ); }; 导出默认的 SEOSetup；
最后，在页面上使用它们。这里我们只是用格式组件并使用我们的自定义设置 SEO SEO设置 标签。

从“下一个”导入类型 { NextPage } 从'../components/Format'导入格式；
从“../components/SEOSetup”导入 SEOSetup；常量主页：NextPage = () => {
返回（

这是主页。
) } 导出默认主页；