Mac环境下创建默认React/Next.js项目出现404及资源加载错误的排查求助

我在自己的Mac上使用官方脚手架创建默认的React或Next.js项目时，总会遇到资源加载错误，但在同事的Windows或者其他Mac设备上执行完全相同的操作却一切正常，所以我怀疑是我这台Mac的系统或环境配置出了问题。下面是具体的操作步骤和报错详情：

Next.js项目场景 #

• 操作流程：用npx create-next-app创建新项目，依赖包安装全程无报错（当前Node版本为v16.9.1，之前使用v14.6.x版本时也出现过相同问题）；
• 启动状态：执行npm run dev后，服务器正常启动在3000端口，终端没有任何报错信息；
• 访问异常：打开浏览器访问0.0.0.0:3000或localhost:3000时，页面始终空白，浏览器控制台输出多条404错误：

GET http://localhost:3000/_next/static/chunks/webpack.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found)
localhost/:1 GET http://localhost:3000/_next/static/chunks/main.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found)
localhost/:1 GET http://localhost:3000/_next/static/chunks/react-refresh.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found)
localhost/:1 GET http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found)
localhost/:1 GET http://localhost:3000/_next/static/development/_buildManifest.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found)
localhost/:1 GET http://localhost:3000/_next/static/chunks/pages/index.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found)
localhost/:1 GET http://localhost:3000/_next/static/development/_ssgManifest.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found)

React项目场景 #

• 操作流程：用npx create-react-app react1创建项目，进入项目目录后执行npm start；
• 报错信息：页面无法正常加载，浏览器控制台输出如下错误：

GET http://localhost:3001/%PUBLIC_URL%/manifest.json 400 (Bad Request)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
favicon.ico:1 GET http://localhost:3001/%PUBLIC_URL%/favicon.ico 400 (Bad Request)
The attempt to bind "/%PUBLIC_URL%/manifest.json" in the workspace failed as this URI is malformed.

我不确定这两个问题是否由同一原因导致，特此一并说明，希望能得到大家的解决建议，感谢！

内容的提问来源于stack exchange，提问作者Pascal Laenen