在 VS Code 中创建 Next.js 应用程序没有“Pages”或“Styles”文件夹

Question

在 VS Code 中创建 Next.js 应用程序时，我运行以下命令：“npx create-next-app@latest”并完成创建应用程序的过程。但是，Next.js 的网站显示我应该有一个“pages”和“styles”文件夹以及“app”和“public”文件夹。如果我选择了错误的选项或什么，我不确定这是否与创建应用程序时的“您想使用...”部分有关。

“您想使用...”部分 我看到的顶级文件和文件夹

我更新了 Node.js 并使用“您想使用...”部分中的不同选择多次重新创建了应用程序。我希望文件夹会出现，但没有成功。我不确定该去哪里，因为我刚开始使用 Next.js。

Answer 1

当您使用最新版本创建新项目时，它默认create-next-app使用最近发布的App Router功能。因此，您的项目包含该app目录而不是pages.

\n

$ npx create-next-app@latest\n\xe2\x9c\x94 What is your project named? \xe2\x80\xa6 nextjs-project\n\xe2\x9c\x94 Would you like to use TypeScript? \xe2\x80\xa6 Yes\n\xe2\x9c\x94 Would you like to use ESLint? \xe2\x80\xa6 Yes\n\xe2\x9c\x94 Would you like to use Tailwind CSS? \xe2\x80\xa6 No\n\xe2\x9c\x94 Would you like to use `src/` directory? \xe2\x80\xa6 No\n\xe2\x9c\x94 Would you like to use App Router? (recommended) \xe2\x80\xa6 Yes\n\xe2\x9c\x94 Would you like to customize the default import alias (@/*)? \xe2\x80\xa6 No\n

\n

$ tree -d -L 1 nextjs-project\nnextjs-project\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 public\n

\n

这是默认的项目结构，您可以在 Next.js 文档的“使用 App Router”部分找到所有相关文档和示例。

\n

https://nextjs.org/docs/app/building-your-application/routing

\n

但是，如果您不想使用 App Router，则应该对“使用 App Router（推荐）？”回答“否”。问题。在这种情况下，您的项目将包含该pages目录。

\n

$ npx create-next-app@latest \n\xe2\x9c\x94 What is your project named? \xe2\x80\xa6 nextjs-project\n\xe2\x9c\x94 Would you like to use TypeScript? \xe2\x80\xa6 Yes\n\xe2\x9c\x94 Would you like to use ESLint? \xe2\x80\xa6 Yes\n\xe2\x9c\x94 Would you like to use Tailwind CSS? \xe2\x80\xa6 No\n\xe2\x9c\x94 Would you like to use `src/` directory? \xe2\x80\xa6 No\n\xe2\x9c\x94 Would you like to use App Router? (recommended) \xe2\x80\xa6 No\n\xe2\x9c\x94 Would you like to customize the default import alias (@/*)? \xe2\x80\xa6 No\n

\n

$ tree -d -L 1 nextjs-project\nnextjs-project\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 pages\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 styles\n

\n

您可以在 Next.js 文档的“使用 Pages Router”部分找到旧版 Pages Router 文档。

\n

https://nextjs.org/docs/pages/building-your-application/routing

\n