Next.js 中如何使用 react-helmet？-JavaScript中文网-JavaScript教程资源分享门户

在现代Web应用程序中，搜索引擎优化(SEO)是必须考虑的，因为它可以使我们的应用程序在各种搜索引擎中更容易被查找和检索。React 中的 react-helmet 是一个非常流行的库，用于处理不同页面之间的 HTML 头部信息。如果您正在使用 Next.js，那么您很可能会想知道如何使用 react-helmet 来管理您的 HTML 头部信息。本文将详细介绍如何在 Next.js 中使用 react-helmet。

安装 react-helmet

首先，您需要使用 npm 或 yarn 安装 react-helmet：

npm install react-helmet

# 或者

yarn add react-helmet

配置实例

现在，我们将看到如何在 Next.js 中使用 react-helmet。首先，假设您已经有一个 Next.js 应用程序，并且您正在使用 _app.js 文件来渲染整个应用程序。以下是您可能已经拥有的 _app.js 文件的示例：

// javascriptcn.com 代码示例
import React from 'react';
import App from 'next/app';

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}

接下来，我们将使用 react-helmet 动态插入一些 HTML 头部信息，比如 title、description、og:title 等。要使用 react-helmet，您需要导入两个组件 <Helmet> 和 <title>。

// javascriptcn.com 代码示例
import React from 'react';
import App from 'next/app';
import { Helmet } from 'react-helmet';

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <Helmet>
          <title>Next.js and react-helmet</title>
          <meta name="description" content="使用 react-helmet 管理 HTML 头部信息" />
          <meta property="og:title" content="Next.js and react-helmet" />
        </Helmet>
        <Component {...pageProps} />
      </>
    );
  }
}

在这个示例中，我们在应用程序的头部添加了一个标题(Next.js and react-helmet) 、一个 meta 描述标签以及一个 Open Graph 标题。您可以根据需要添加更多的 HTML 标签。React helmet 还支持非常多的其他功能，包括 css 外部表和嵌入式表，网页图标标签，等等。

Next.js 中的异步使用

在 Next.js 中，您可以使用异步数据获取方式静态生成页面。在这种情况下，我们可能需要使用 getInitialProps 方法来处理异步获取数据，并根据数据更改页面的头部数据。接下来我们创建一个页面 page.js，并在其中演示如何使用 getInitialProps。

// javascriptcn.com 代码示例
import React from 'react';
import { Helmet } from 'react-helmet';
import axios from 'axios';

const Page = ({ data }) => (
  <>
    <Helmet>
      <title>{data.title}</title>
      <meta name="description" content={data.description} />
      <meta property="og:title" content={data.title} />
    </Helmet>
    <h1>{data.title}</h1>
    <p>{data.content}</p>
  </>
);

Page.getInitialProps = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
  return { data };
};

export default Page;

在这个示例中，我们使用 getInitialProps 获取数据，并且将数据传递给 <Helmet> 和页面中的其他元素。当我们使用 getInitialProps 时，Next.js 将在每次访问页面时执行它，并将获取到的数据作为 props 传递给页面组件。

总结

使用 react-helmet 可以让我们在 Next.js 中非常方便地管理 HTML 头部信息。React helmet 是一个易于使用的库，提供强大的功能来管理各种元数据，并且很容易与 Next.js 集成。本文给出了一个具体的示例来展示如何在 Next.js 中使用 react-helmet，希望本文能够对您学习和开发 Next.js 应用程序过有一些帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6548a3dc7d4982a6eb2e85e7