随着前端开发的发展，搜索引擎优化（SEO）变得越来越重要。对于有搜索引擎流量需求的网站或应用，SEO 优化已经成为必不可少的一部分了。Next.js 就是一个非常优秀的框架，它为我们提供了很多优秀的 SEO 最佳实践。
SSR
首先，Next.js 提供了服务器端渲染（SSR）的支持。换句话说，它可以在服务端渲染页面并将完整的 HTML 发送到浏览器，这样有利于搜索引擎爬虫对页面的识别和收录，提升页面的搜索排名。
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
----- ---- ------- --------------- -
-------- -
------ -
-----
--------- -------------
------
--
-
-
------ ------- -----以上代码简单演示了一个基本的 Next.js 页面，我们可以通过 npm run dev 命令启动开发服务器，并访问 http://localhost:3000/ 地址即可。
Head
接下来我们需要在页面中添加一些 SEO 相关的标签，例如 <title>、<meta>、<link> 等等。这部分内容可以通过 next/head 命名空间中的组件实现。
-- -------------------- ---- -------
------ ---- ---- ------------
----- ---- ------- --------------- -
-------- -
------ -
-----
------
------------ ---------------
----- --------------- ---------------------------- ------------------ --
----- ---------- ------------------- --
-------
--------- -------------
------
--
-
-
------ ------- -----以上代码中，我们通过组件的形式来添加了 <title>、<meta> 和 <link> 标签。注意到我们没有在页面内部添加这些标签，而是在 <Head> 中添加。这种方式有助于提高页面的可读性和可维护性。
Sitemap
另一个常用的 SEO 最佳实践是添加 sitemap。Sitemap 是一个 XML 文件，包含了所有页面的信息，有助于搜索引擎爬虫更加高效地抓取和索引网站的内容。
我们可以通过在 pages 文件夹下添加一个 sitemap.xml 文件来实现这个功能。
-- -------------------- ---- -------
-- --------------------
----- ------- - -- -- ---
----------------------- - ----- -- --- -- -- -
----------------------------- ------------
---------------- ------------- ------------------
------- ----------------------------------------------------
-----
--------------------------------
-----------------------------
------------------------------
------------------------
------
----------
--
----------
--
------ ------- --------以上代码中，我们定义了一个 Sitemap 组件，并在其中添加了一个静态 XML 内容。然后在 getInitialProps 中设置返回数据的格式为 text/xml，将 XML 字符串写入响应中并结束请求。
我们还需要在 next.config.js 文件中添加一个路由覆盖规则，以确保能够正常访问到 sitemap.xml 文件。
-- -------------------- ---- -------
-- --------------
-------------- - -
----- ---------- -
------ -
-
------- ---------------
------------ ------------------
--
--
--
-- ---
--现在我们可以访问 http://localhost:3000/sitemap.xml 地址了，您应该可以看到我们编写的 XML 内容。
Robots.txt
另一个常见的 SEO 最佳实践是添加 robots.txt 文件。该文件指示了搜索引擎爬虫哪些页面可以被爬取，哪些不能被爬取。
在 Next.js 中，我们可以通过在 public 文件夹下添加一个 robots.txt 文件来实现这个功能。
User-agent: * Disallow: Sitemap: http://mywebsite.com/sitemap.xml
以上是一个基本的 robots.txt 文件，它允许所有爬虫爬取所有页面，并将 sitemap 的地址指定为 http://mywebsite.com/sitemap.xml。
结论
Next.js 为我们提供了非常有利于 SEO 的功能和最佳实践。服务器端渲染、Head 组件、sitemap、robots.txt 等等，这些功能可以帮助我们提升网站的搜索排名，吸引更多的访问流量，同时让我们的代码更加健壮和易于维护。如果您正在开发一个有搜索引擎流量需求的网站或应用，我非常推荐您使用 Next.js。
参考资料
- Next.js 官方文档，https://nextjs.org/docs。
- 学习 Next.js，https://learnnextjs.com。
- SEO 最佳实践，https://developers.google.com/search/docs/beginner/seo-starter-guide。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6718934bad1e889fe22c8de9