面试题：Next.js 中自定义 Document 组件如何设置页面元数据

实现步骤：
- 首先，在项目的 pages 目录下创建 _document.js 文件。
- 引入必要的模块，如 next/document 中的 Document、Html、Head、Main 和 NextScript。
- 自定义 Document 组件，在 Head 部分根据页面的需求动态设置 title、description 等元数据。
关键代码示例：

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() {
    return (
      <Html>
        <Head>
          {/* 设置特定的title */}
          <title>自定义页面标题</title>
          {/* 设置特定的description */}
          <meta name="description" content="这是自定义的页面描述" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

在实际应用中，如果 title 和 description 是动态的，可以通过传递 props 等方式来动态设置。例如：

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 { pageTitle, pageDescription } = this.props;
    return (
      <Html>
        <Head>
          <title>{pageTitle}</title>
          <meta name="description" content={pageDescription} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const initialProps = await Document.getInitialProps(ctx);
  // 假设这里从页面获取动态数据
  const pageTitle = '动态页面标题';
  const pageDescription = '动态页面描述';
  return { ...initialProps, pageTitle, pageDescription };
};

export default MyDocument;

星途面试题库

面试题：Next.js 中自定义 Document 组件如何设置页面元数据

知识考点

面试题答案