如何在Next.js应用中动态向head插入分页关联代码？

你之前的问题在于：把HTML标签转成字符串后，Next.js的<Head>组件会把它当作纯文本输出，不会解析成真正的<link>元素，自然无法被Google识别。下面是两种可行的实现方式：

方式一：直接在Head中条件渲染React元素 #

直接通过变量计算出prev/next的URL，然后用React元素的形式渲染，而不是字符串：

import Head from 'next/head';

export default function ArticlePage({ currentPage, storyId, totalPages }) {
  const baseUrl = `https://www.example.com/article?story=${storyId}`;
  // 计算上一页和下一页的URL
  const prevUrl = currentPage > 1 ? `${baseUrl}&page=${currentPage - 1}` : null;
  const nextUrl = currentPage < totalPages ? `${baseUrl}&page=${currentPage + 1}` : null;

  return (
    <>
      <Head>
        {/* 只有存在上一页时才渲染prev标签 */}
        {prevUrl && <link rel="prev" href={prevUrl} />}
        {/* 只有存在下一页时才渲染next标签 */}
        {nextUrl && <link rel="next" href={nextUrl} />}
      </Head>
      {/* 页面主体内容 */}
    </>
  );
}

方式二：封装成函数生成元素数组 #

如果需要复用逻辑，可以把生成link标签的逻辑封装成函数，让函数返回React元素数组：

import Head from 'next/head';

// 封装生成分页link的函数
function getPageRelationshipLinks(currentPage, storyId, totalPages) {
  const baseUrl = `https://www.example.com/article?story=${storyId}`;
  const links = [];

  if (currentPage > 1) {
    links.push(
      <link key="page-prev" rel="prev" href={`${baseUrl}&page=${currentPage - 1}`} />
    );
  }
  if (currentPage < totalPages) {
    links.push(
      <link key="page-next" rel="next" href={`${baseUrl}&page=${currentPage + 1}`} />
    );
  }

  return links;
}

export default function ArticlePage({ currentPage, storyId, totalPages }) {
  return (
    <>
      <Head>
        {getPageRelationshipLinks(currentPage, storyId, totalPages)}
      </Head>
      {/* 页面主体内容 */}
    </>
  );
}

这两种方式都会让Next.js正确渲染出<link rel="prev">和<link rel="next">标签，Google爬虫就能识别到分页页面之间的关联了。

内容的提问来源于stack exchange，提问作者DevQandA