问题背景
在前端开发中，很多人会选择将自己的网站托管在 Github Pages 上，因为它免费、安全、稳定。然而，当你通过 Github Pages 部署的静态网站中有多个页面时，你会发现一个很棘手的问题，那就是刷新或直接访问内部路径时会遇到 404 错误页面。
解决方案
Next.js 是一个基于 React 的 SSR 框架，它不仅支持预渲染，还能够在服务器端动态构建网页，因此，Next.js 可以很好地解决 Github Pages 的 404 问题。
第一步：安装 Next.js
通过 npm 安装 Next.js：
npm install next react react-dom
第二步：使用 Next.js 创建项目
npx create-next-app my-app cd my-app npm run dev
第三步：使用 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 的文件，并将以下内容添加到文件中：
cp 404.html out/404.html cp -r out/* .
现在，我们的配置已经完成。
总结
使用 Next.js 可以轻松解决 Github Pages 的 404 问题。它为我们提供了许多有用的功能，如预渲染、动态构建、自动部署等。 如果你正在寻找一种易于使用的解决方案来处理 Github Pages 的 404 问题，那么 Next.js 是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0d2cf83d39b4881529d7d