面试题：Next.js自定义Document组件时如何动态处理不同页面的SEO数据

数据传递：

在每个页面组件中，通过getStaticProps或getServerSideProps（根据实际需求选择）获取该页面特定的SEO数据。例如：

export async function getStaticProps() {
  const seoData = {
    title: '页面特定标题',
    keywords: '关键词1,关键词2',
    description: '页面特定描述'
  };
  return {
    props: {
      seoData
    },
    revalidate: 60 // 如果使用增量静态再生
  };
}

const Page = ({ seoData }) => {
  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
};

export default Page;

自定义Document组件：

创建自定义Document组件，通常在pages/_document.js。在这个组件中接收从页面传递过来的SEO数据。

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    const { seoData } = this.props;
    return (
      <Html>
        <Head>
          {seoData && <title>{seoData.title}</title>}
          {seoData && <meta name="keywords" content={seoData.keywords} />}
          {seoData && <meta name="description" content={seoData.description} />}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

将页面SEO数据传递给Document组件：

在页面组件中，通过getInitialProps方法将SEO数据传递给Document组件。

export async function getStaticProps() {
  const seoData = {
    title: '页面特定标题',
    keywords: '关键词1,关键词2',
    description: '页面特定描述'
  };
  return {
    props: {
      seoData
    },
    revalidate: 60
  };
}

export async function getInitialProps(ctx) {
  const pageProps = await getStaticProps(ctx);
  return {
   ...pageProps,
    seoData: pageProps.seoData
  };
}

const Page = ({ seoData }) => {
  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
};

export default Page;

这样，每个页面的不同SEO数据就能动态获取并在自定义Document组件中正确设置。

星途面试题库

面试题：Next.js自定义Document组件时如何动态处理不同页面的SEO数据

知识考点

面试题答案