将 Next.js 应用程序中的 Pages 文件夹移动到 src 文件夹

Question

在create-next-appNext.js 应用程序中，我想将pages根目录中的文件夹移动到一个src文件夹中。我添加了jsconfig.json代码（如下），但是现在我收到错误消息“404 | 找不到此页面。” 有人有任何见解吗？（抱歉，网络开发初学者）

{
    "compilerOptions": {
        "baseUrl": "src"
    }
}

Answer 1

Nextjs 默认支持移动/pages到src/文件夹。

1. 在根目录中创建一个 /src 文件夹。
2. 删除/.next文件夹
3. 移至/pages/src 文件夹 请记住 package.json，.gitignore其他配置文件需要位于根目录中，不应移至 /src 文件夹。

完成后，只需运行命令$ npm run dev或$ yarn dev，这样您就可以在本地主机上查看它。

更多： https: //nextjs.org/docs/advanced-features/src-directory

Answer 2

如果您使用 NextJS + TailwindCSS，则需要tailwind.config.js在移动目录下的文件后更改以下内容src：

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
...
...

Answer 3

您需要停止服务器然后执行npm run dev. 当我将内容移至 src 目录并开始收到 404 页面时，这解决了我的问题。

Answer 4

正如 @Thierry 在评论中提到的，根据文档“页面也可以添加到 src/pages 下，作为根页面目录的替代。src 目录在许多应用程序中非常常见，Next.js 默认支持它。”

因此，如果根目录中存在页面，则 src/pages 将被忽略。

更多官方文档：https://nextjs.org/docs/advanced-features/src-directory