Creating Next.js application in VS Code has no Pages or Styles folder

Question

When creating a Next.js application in VS Code, I run the following command: "npx create-next-app@latest" and complete the process of creating the application. However, Next.js' website shows that I should have a "pages" and "styles" folders as well as an "app" and "public" folders. If I selected the wrong option or something, I'm not sure if this has to do with the "Do you want to use..." part when creating the app.

"Do you want to use..." section Top-level files and folders I see

I updated Node.js and re-created the application multiple times with different selections in the "Do you want to use..." section. I was hoping the folder would show up but no luck. I'm not sure where to go since I'm new to using Next.js.

Answer 1

When you create a new project using the latest create-next-app, it uses the recently released App Router default functionality. Therefore, your project contains the app directory, not the pages.

If you do not want to use App Router, you should answer "No" to "Use App Router (recommended)?" question. In this case, your project will contain the pages directory.

$ npx create-next-app@latest
✔ What is your project named? … nextjs-project
✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use Tailwind CSS with this project? … No
✔ Would you like to use `src/` directory with this project? … No
✔ 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