星途面试题库

面试题：Next.js中如何自定义Document组件来设置基本的SEO元标签

在Next.js项目里，假设要为页面设置通用的SEO元标签，如title、description等，请阐述自定义Document组件的步骤，并给出关键代码示例。

43.5万热度

难度

前端开发Next.js

知识考点

AI 面试

面试题答案

创建 _document.js 文件：在 pages 目录下创建 _document.js 文件，该文件用于自定义 Next.js 的文档结构。
导入必要模块：在 _document.js 中导入 Document、Html、Head、Main、NextScript 等 Next.js 提供的相关模块。
自定义 Document 组件：继承 Document 类，在 render 方法中设置通用的 SEO 元标签。

关键代码示例如下：

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

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <title>你的通用页面标题</title>
          <meta name="description" content="你的通用页面描述" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;