javascript 如何在Next.js 13应用路由器中添加模式

ylamdve6 于 2023-09-29 发布在 Java

关注(0)|答案(1)|浏览(89)

tl;dr

Next.js 13的/app路由器的layout和page路由改变了我们向<head>添加内容的方式。如何向每个页面添加架构脚本？Next.js会自动将任何layout或page中的<head>标签编译成一个<head>。

目标

就像在任何网站与伟大的搜索引擎优化，我想包括在每个页面的头部模式脚本。

历史

通常情况下，这将像在<head>中这样编写一样简单：

<!-- index.html -->
<head>
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      // ... the rest
    }
  </script>
</head>

然后，使用Next.js /pages目录，情况略有不同。不得不使用dangerouslySetInnerHTML属性对我来说总是感觉很奇怪，但至少它工作了。

// index.tsx
import Head from 'next/head'
export default function Page() {
  return (
    <Head>
      <script id="schema" type="application/ld+json" dangerouslySetInnerHTML={{__html: `
        {
          "@context": "https://schema.org",
          // ... the rest
        }
      `}} />
    </Head>
  )
}

问题

现在，随着/app路由器的引入，我们有了很好的、新的、简化的设置元数据的方法，而不必直接通过next/head导入<head>。事实上，next/head组件不应该在/app路由器中使用。
所以问题就变成了...

如何按页访问`<head>`？

我希望Next.js团队已经考虑到这一点，并将schema添加到新的metadata变量，甚至是它自己的变量，但据我所知，他们似乎没有计划这样做。
我尝试将<head>添加到page，不幸的是，它无法正确合并到<head>中。到目前为止，我唯一能做的就是将模式添加到每个layout中，但是为每个页面提供单独的布局是多么麻烦。
任何想法都欢迎。

JavaScript

来源：https://stackoverflow.com/questions/76731962/how-to-add-schemas-in-next-js-13-app-router

1条答案

按热度按时间

hmmo2u0o1#

你可能已经有了答案，但对于我们所有可能正在寻找解决同一问题的方法的人来说：

import Head from 'next/head';

function ProductPage() {
  function addProductJsonLd() {
    return {
      __html: `{
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "Executive Anvil",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
      "sku": "0446310786",
      "mpn": "925872",
      "brand": {
        "@type": "Brand",
        "name": "ACME"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Fred Benson"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "89"
      },
      "offers": {
        "@type": "Offer",
        "url": "https://example.com/anvil",
        "priceCurrency": "USD",
        "price": "119.99",
        "priceValidUntil": "2020-11-20",
        "itemCondition": "https://schema.org/UsedCondition",
        "availability": "https://schema.org/InStock"
      }
    }
  `,
    };
  }
  return (
    <div>
      <Head>
        <title>My Product</title>
        <meta
          name="description"
          content="Super product with free shipping."
          key="desc"
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={addProductJsonLd()}
          key="product-jsonld"
        />
      </Head>
      <h1>My Product</h1>
      <p>Super product for sale.</p>
    </div>
  );
}

export default ProductPage;

这里是next.js文档中更多信息的链接！https://nextjs.org/learn/seo/rendering-and-ranking/metadata

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 如何在Next.js 13应用路由器中添加模式

目标

历史

问题

如何按页访问`<head>`？

1条答案

相关问题

热门标签

最新问答

javascript 如何在Next.js 13应用路由器中添加模式

目标

历史

问题

如何按页访问<head>？

1条答案

相关问题

热门标签

最新问答

如何按页访问`<head>`？