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

Question

在一个使用create-next-app创建的Next.js应用程序中，我想将根目录下的pages文件夹移动到src文件夹中。我添加了一个包含以下代码的jsconfig.json，但现在我收到错误消息"404 | This page could not be found."。有人有任何见解吗？（对于 Web 开发初学者感到抱歉）

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

- nmy1095

---

你能展示一下编译时出现的错误吗？请注意，您无需添加任何配置即可将“pages”移动到“src”文件夹中，Next.js会自动在“src”文件夹中查找它（只要根目录中没有“pages”文件夹）。 - juliomalves

嘿@juliomalves，感谢回复。很抱歉我的初始问题有很多错误，已经进行了编辑。现在它可以编译，但是我收到了一个404请求（404 | 找不到此页面）。我做的事情是创建了一个src目录，将pages文件夹移动到该目录中，然后添加了一个jsconfig.js文件，并将baseUrl设置为src。我做错了吗？ - nmy1095

Next.js会在[/pages] 或 [/src/pages] 文件夹及其子文件夹中查找您的页面。在jsconfig.json中无需进行任何配置。 你把页面源文件放在哪个文件夹中？如果使用[/src/pages]，请确保删除[/pages]文件夹。[更多信息请参见https://nextjs.org/docs/advanced-features/src-directory] - Thierry

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

- Johnson Fashanu

---

谢谢。之前一直想不通为什么我的XProvider组件不再被它们的使用者所看到。删除 /.next 文件夹解决了这个问题，我猜测可能是缓存问题。 - LevPewPew

请注意，如果使用yarn，则yarn dev无法工作，您需要在删除.next目录后使用npm run dev。 - Daltron

@Daltron 刚刚尝试了 yarn dev，一切正常。 - Stephen Asuncion

Answer 2

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

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

- Ssh Quack

---

这在我的情况下是问题，谢谢。 - flyingfishcattle

Answer 3

您需要停止服务器，然后执行 npm run dev。当我将文件移动到 src 目录并开始出现 404 页面时，这解决了我的问题。

- Tommy Wolfheart

Answer 4

content: [
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}',

如果出现src的情况，请使用上面的替换方式

- Ajay

Answer 5

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

因此，如果根目录下存在pages目录，则会忽略src/pages目录。

更多信息请参见官方文档：https://nextjs.org/docs/advanced-features/src-directory

- Charles Pine

Answer 6

1. 如果根目录中存在pages文件夹，则src/pages将被忽略。
2. 如果您使用Typescript，请更新tsconfig.json文件。

"paths": {
  "@/*": ["./src/*"]
}

3. 重新运行 npm run dev

- Cristian Florescu