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

在 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 = () => {
  返回 （
  
  

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

⭐️⭐️结局⭐️️️️️⭐️

我希望你觉得这有帮助。
请在评论中告诉我。
有关更多此类内容，请在 Twitter 上关注我—— @ShubhInTech

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/27090/47231108