在当今时代，博客已经成为了许多人记录和分享他们的技术和生活的重要手段。而静态网站生成器变得越来越流行。本文将详细介绍如何使用 React 和 Next.js 构建静态博客，并优化 SEO。
Next.js 简介
Next.js 是一个基于 React 库的轻量级框架，可以让开发者更快速地创建 React 应用。它内置了服务器端渲染 (SSR) 和静态网站生成器 (SSG) 功能。同时，它还提供了一系列优化工具，包括自动代码分割、预获取和缓存等等。
构建静态博客
静态博客是在构建时生成 HTML、CSS 和 JavaScript 等静态资源的博客，其内容是在构建时就写入了 HTML 文件中，相比于动态博客，速度更快，并更容易被搜索引擎收录。
为了构建一个静态博客，我们需要安装 Next.js 和 React：
npm install next react react-dom
然后，我们就可以开始创建一个静态博客了。在 Next.js 中，我们可以很方便地创建一个基本的页面结构。例如：
-- -------------------- ---- -------
------ ---- ---- ------------
------ ------- -------- ------ ------ ------------ ------- -- -
------ -
--
------
----------------------
----- ------------------ --------------------- --
-------
----------------
--------------------
---- -------------------------- ------- ------- -- --
---
--
-这个例子展示了一个简单的页面，其中使用了 <Head> 组件设置了页面的 title 和 description。<div> 中的 dangerouslySetInnerHTML 属性展示了我们从 CMS API 中获取的 content。
接下来，我们需要在 getStaticPaths 函数中动态生成页面。例如：
-- -------------------- ---- -------
------ -- ---- --------------
------ - ---- - ---- -------
------ ------ ---- --------------
------ ---- ---- ------------------------
------ ----- -------- ---------------- -
----- -------------- - ------------------- ---------- --------
----- --------- - ----- ---------------------------
----- ----- - ------------------------ -- -
----- -------- - -------------------- ----------
----- ------------ - ------------------------- --------
----- ------------ - ---------------------
------ -
----- ------------------------- ----
--------------------
--
---
----- ----- - ---------------- -- --
------- - ----- --------- -
----
------ -
------
--------- -----
--
-
------ ----- -------- ---------------- ------ -- -
----- -------------- - ------------------- ---------- --------
----- -------- - -------------------- ---------------------
----- ----------- - ----- --------------------- --------
----- - ----- ------- - - --------------------
------ -
------ -
--------
-------
-
--
-
------ ------- -----这个例子中，我们利用了 Next.js 提供的 getStaticPaths 和 getStaticProps 函数动态地生成页面。在 getStaticPaths 中，我们读取存储博客的目录并遍历目录中的所有 markdown 文件。然后，我们将 markdown 文件的内容解析为一个 JavaScript 对象，并提取 title、description 等元信息。在最后，我们返回了一个 paths 数组，其中每个元素是一个包含页码参数的路由地址，例如 /blog/my-first-post。
在 getStaticProps 中，我们读取了在 getStaticPaths 中生成的路径参数，然后根据路径参数读取 markdown 文件的内容并提取出其元信息和正文。之后，我们将这些数据作为组件的 props 返回，供 <Blog> 组件使用。
最后，我们只需要将生成的 HTML、CSS 和 JavaScript 上传到静态文件托管服务上，就可以轻松地发布我们的博客了。
SEO 优化
SEO（Search Engine Optimization，中文名为搜索引擎优化）是指对网站进行优化，提高网站在搜索引擎中获取流量和曝光率的技术手段。在现代互联网的环境下，优化 SEO 放在非常重要的位置。
下面是一些优化 SEO 的技巧：
Meta 标签
在页面的 <head> 中添加适当的 Meta 标签可以提高页面的可读性和可访问性。例如：
<head> <meta charset="UTF-8"> <title>My Blog</title> <meta name="description" content="This is my blog."> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
其中，<meta> 标签中的 description 属性描述了页面的内容概述，author 属性描述了作者信息，viewport 属性描述了响应式布局的设置。
Sitemap 和 Robots.txt
Sitemap 是一个用于描述网站内容结构的 XML 文件，能够帮助搜索引擎更快地了解和爬取网站内容。在 Next.js 中，我们可以使用 sitemap 模块生成一个基本的 Sitemap：
-- -------------------- ---- -------
------ - -------------- --------------- - ---- ----------
------ - ---------- - ---- -------
------ - -------- - ---- ---------
------ - ---- - ---- -------
------ - -------- -- -- - ---- -----
----- -------- ----------------- -
----- -------- - --- --------------- --------- --------------------- --
----- -------- - ----------------------------
----- -------------- - ------------------- ---------- --------
----- --------- - ----- ---------------------------
----- ------------------------------- ---------- -- -
----- ------- - ---------------------------------- ------
----------------
---- --------
----------- --------
--------- ----
----------- --- --------------------
---
----
---------------
----- ------- - ----- --------------------------
------ -------------------
-此外，我们还需要为搜索引擎生成 robots.txt 文件，以指示搜索引擎爬虫哪些页面可以被爬取，哪些页面被禁止访问。在 Next.js 中，我们可以使用 server.js 文件生成 robots.txt：
-- -------------------- ---- -------
----- - ------------ - - ---------------
----- - ----- - - --------------
----- ---- - ---------------
----- --------- - ------------ -
-------- -------------------------------
--------- --------
----- --- - -------------------- --- ------------
----- --- - ------ --- --
----- ------ - -----------------------
--------------------- -- -
------------------ ---- -- -
----- --------- - -------------- -----
----- - --------- ----- - - ---------
-- --------- --- -------------- -
----------------------------- -------------
--------------------
---------
- ---- -
----------- ---- ----------
-
--------------- -- -- -
------------------ -- -----------------------
--
--静态资源优化
静态资源的加载速度与用户体验和 SEO 密切相关。为了优化静态资源的加载速度，我们可以在 Next.js 中使用内置组件 next/image 和 next/script，并使用 import 语句异步加载组件。
next/image 组件可以自动实现图片的懒加载和适当的压缩，从而提高页面的响应速度：
-- -------------------- ---- -------
------ ----- ---- -------------
-------- ------------- -
------ -
-----
------
----------------
------------ -- --- -------
-----------
------------
--
------
--
-next/script 组件可以帮助我们异步加载 JavaScript 代码，并设置 defer、async 等属性：
-- -------------------- ---- -------
------ ------ ---- --------------
-------- ------------- -
------ -
-----
-------
-----------------------------------
----------------------------
-----
--
------
--
-总结
本文介绍了如何使用 React 和 Next.js 构建静态博客，并优化 SEO。我们首先通过 getStaticPaths 和 getStaticProps 函数动态生成页面，并将生成的 HTML、CSS 和 JavaScript 上传到静态文件托管服务上发布。然后，我们提出了一些优化 SEO 的技巧，例如 Meta 标签、Sitemap 和 Robots.txt、静态资源优化等等。如果您正在考虑使用静态博客作为博客的部署方式，那么本文可以为您提供一些帮助。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649f9b3548841e9894bf6398