在开发 Web 应用程序时，设置页面的 title 是很重要的一项工作。通常，在传统的前端框架中，开发人员可以在页面模板中直接设置 title。但是，在 Next.js 中，由于在服务器渲染时需要先获取数据，因此设置 title 变得稍有不同。下面将介绍一些技巧，以帮助您在 Next.js 中实现自定义页面 title。
基础设置
首先，我们可以使用 Next.js 提供的支持来设置基本的全局页面 title。在 pages/_document.js 文件中通过重载 NextDocument 类来实现。这个 _document.js 文件是 Next.js 服务端渲染的入口，我们可以在其中设置基本的 HTML 模板，包括 head 和 body 等。
-- -------------------- ---- -------
-- ------------------
------ --------- - ----- ----- ----- ---------- - ---- ----------------
----- ---------- ------- -------- -
-------- -
------ -
------
------
--------- -----------
-------
------
----- --
----------- --
-------
-------
--
-
-
------ ------- -----------上面的代码会让每个页面的 title 始终为 "My App"。当然，我们需要的是自定义每个页面的 title。因此，我们需要先获取每个页面的数据来动态设置 title。
获取页面数据设置 title
我们可以在每个页面组件的 getInitialProps 方法中获取页面数据，并动态设置 title。对于 Next.js 而言，每个页面组件都必须包含 getInitialProps 方法用来获取页面数据，这些数据会在服务器端渲染和客户端渲染时都会用到。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------ ---- -- -
------ -
-----
---------------------
------------------
------
--
-
-------------------- - ----- -- ----- -- -- -
----- - -- - - ------
----- --- - ----- ----------------------------------------------------------
----- ---- - ----- -----------
------ - ---- --
--
------ ------- -----上面的代码演示了页面组件如何获取数据。当然，获取数据仍然不足以动态设置 title。为了显示到 title 中，我们需要使用 react-helmet 库。
使用 react-helmet
react-helmet 是 React 中非常流行的第三方库，它可以动态设置 head 中的各种 meta 标签和 title。以下是如何在 Next.js 中使用它。
安装和导入
在 Next.js 项目中安装和导入 react-helmet。
npm install react-helmet
-- -------------------- ---- -------
-- ------------------
------ --------- - ----- ----- ----- ---------- - ---- ----------------
------ - ------ - ---- ---------------
----- ---------- ------- -------- -
-------- -
------ -
------
------
------- ----------------- ----- ---- ---
--------- -----------
---------
-------
------
----- --
----------- --
-------
-------
--
-
-
------ ------- -----------使用 Helmet 组件动态设置页面的 title。现在，我们需要在每个页面中动态应用。
页面组件中使用
在页面组件中，您可以在 render 方法中使用 Helmet 组件来设置页面的 title。
-- -------------------- ---- -------
-- -------------
------ ----- ---- --------
------ - ------ - ---- ---------------
-------- ------ ---- -- -
------ -
-----
--------
---------------------------
---------
---------------------
------------------
------
--
-
-------------------- - ----- -- ----- -- -- -
----- - -- - - ------
----- --- - ----- ----------------------------------------------------------
----- ---- - ----- -----------
------ - ---- --
--
------ ------- -----上面的代码演示了如何在 Post 页面组件中设置 title。您可以根据需要在其他页面组件中使用 Helmet 组件来动态设置 title。
结论
在 Next.js 中动态设置页面的 title 需要注意的地方还是比较多的，它涉及到了服务端的渲染、数据获取和第三方库的使用等方面。本文介绍了如何在 Next.js 中实现自定义页面 title，基础设置、获取页面数据设置 title 和使用 react-helmet。通过这些技巧，您将能够轻松地在 Next.js 项目中添加自定义的页面 title。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6701fd83f59b73a932a48fe4