javascriptreactjsvisual-studio-codenext.jsnpx

Creating a Next.js app in VS Code does not have 'Pages' or 'Styles' folder

When creating a Next.js app in VS Code, I run the following command: 'npx create-next-app@latest' and go through the process of creating the app. However, Next.js's website shows that I should have a 'pages' and 'styles' folder along with the 'app' and 'public' folder. I am unsure if this has to do with the 'Would you like to use...' section when creating the app if I am selecting the wrong options or what.

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

I updated Node.js and recreated the application multiple times using different selections in the 'Would you like to use...' section. I was hoping the folders would appear, but no success. I am unsure where to go here as I am new to using Next.js.

Solution

  • When you create a new project with the latest create-next-app, it uses the recently released App Router feature by default. Hence, your project contains the app directory instead of 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

    This is the default project structure moving forward, and you can find all relevant documentation and examples under the "Using App Router" section of Next.js docs.

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

    However, if you prefer not to use the App Router, you should answer "No" to the "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? … 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

    You can find legacy Pages Router documentation under the "Using Pages Router" section of Next.js docs.

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