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

Question

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

javascriptreactjsvisual-studio-codenext.jsnpx

15

在VS Code中创建Next.js应用程序时，我运行以下命令：'npx create-next-app@latest'并完成创建应用程序的过程。然而，Next.js的网站显示我应该有一个'pages'和'styles'文件夹以及'app'和'public'文件夹。我不确定这是否与创建应用程序时选择错误选项有关。

'Would you like to use...' section Top level files and folders I am seeing

我更新了Node.js，并多次使用“Would you like to use...”部分中的不同选项重新创建了应用程序。我希望文件夹会出现，但没有成功。由于我是第一次使用Next.js，所以不确定接下来该怎么做。

- zachrm25

3个回答

2

根据Next.JS文档，根布局（RootLayout）已经取代了_app.js和_document.js文件。请查看文档。

- Praveen Vattikonda

1

请在答案本身中添加更多信息。引用来源是很好的，但请在答案中也加入相关部分的来源内容。 - undefined

如果文档清晰明了，这个问题就不会存在了。请提供背景和健康的批评。 :P - undefined

0

官方示例： https://chakra-ui.com/getting-started/nextjs-guide#app-directory-setup 1. app/providers.tsx

'use client'

import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'

export function Providers({ 
    children 
  }: { 
  children: React.ReactNode 
  }) {
  return (
    <CacheProvider>
      <ChakraProvider>
        {children}
      </ChakraProvider>
    </CacheProvider>
  )
}

2. app/layout.tsx

import { Providers } from "./providers";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

- Maqsood Ahmed

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Igor Danchenko · Accepted Answer

当您使用最新的create-next-app创建一个新项目时，默认情况下会使用最近发布的App Router功能。因此，您的项目将包含app目录而不是pages目录。

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

$ tree -d -L 1 nextjs-project
nextjs-project
├── app
├── node_modules
└── public

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

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

然而，如果您不想使用App Router，您应该在“是否使用App Router（推荐）？”问题中选择“否”。在这种情况下，您的项目将包含pages目录。

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

$ tree -d -L 1 nextjs-project
nextjs-project
├── node_modules
├── pages
├── public
└── styles

你可以在Next.js文档的“使用Pages Router”部分找到传统页面路由器的文档。

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