问题背景
在前端开发中，很多人会选择将自己的网站托管在 Github Pages 上，因为它免费、安全、稳定。然而，当你通过 Github Pages 部署的静态网站中有多个页面时，你会发现一个很棘手的问题，那就是刷新或直接访问内部路径时会遇到 404 错误页面。
解决方案
Next.js 是一个基于 React 的 SSR 框架，它不仅支持预渲染，还能够在服务器端动态构建网页，因此，Next.js 可以很好地解决 Github Pages 的 404 问题。
第一步：安装 Next.js
通过 npm 安装 Next.js：
--- ------- ---- ----- ---------
第二步：使用 Next.js 创建项目
--- --------------- ------ -- ------ --- --- ---
第三步：使用 Next.js 构建部署
我们需要将 Next.js 应用程序打包并部署到 Github Pages 上。但是，Github Pages 不支持部署 Next.js 应用程序。 所以，我们需要借助 Github Action 来完成它。该 Github Action 将先构建 Next.js 应用程序，然后将生成的文件推送到 Github Pages 中。
1. 设置环境
我们需要在 package.json 文件中添加以下配置：
-
----------- ---------------------------------------------
---------- -
-------- ----- -------
--------- ----- --------
--------- ---- --- ----- -- --- --- ------ -- ----------
-------- ----- ------
--
--------------- -
----------- ---------
-------- ----------
------------ ----------
------- ---------
--
------------------ -
---------- --------
--
---------- -
------- ------------
------ ---------
--
-------- -
---------- -
------------
-
-
-2. 在 Github 上创建新的仓库
在 Github 上，创建一个新的仓库并进行常规初始化，确保启用 Github Pages。
3. 新增 Github Action 配置
在 .github/workflows/ 目录下，创建新的 Github Action 配置文件，名为 deploy.yml，并将以下内容添加到文件中：
----- ------
---
-----
---------
- ----
-----
-------
-------- -------------
----
------------- --- -------------------- --
------
- ----- -------------------
- ----- --- -- -------
----- ---------------------
-----
------------- ------
- ----- ------- ------------
---- --- -------
- ----- ----- --- ------ ------- -----------
---- --- --- ------
- ----- ------ -- ------ -----
----- -----------------------------
-----
------------- --- -------------------- --
------------ -----4. 新增 shell 配置文件
在根目录下，创建名为 shell.sh 的文件，并将以下内容添加到文件中：
-- -------- ------------ -- -- ----- -
现在，我们的配置已经完成。
总结
使用 Next.js 可以轻松解决 Github Pages 的 404 问题。它为我们提供了许多有用的功能，如预渲染、动态构建、自动部署等。 如果你正在寻找一种易于使用的解决方案来处理 Github Pages 的 404 问题，那么 Next.js 是一个不错的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c0d2cf83d39b4881529d7d