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

Asked 23/5, 2023 at 20:51 Answered 2/11, 2023 at 5:59

Solved javascript reactjs visual-studio-code next.js npx

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.

Terrill answered 23/5, 2023 at 20:51 Comment(0)

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

Excavate answered 23/5, 2023 at 21:6 Comment(3)

Ahh I see. Thank you for the info on that. Appreciate it! – Terrill 24/5, 2023 at 12:37

I ditched learning nextjs because of this, multiple times. I considered this as mis-alignment of application and the documentation. @vercel please mention about the pages stuff in the "create-next-app". – Attire 15/11, 2023 at 18:55

oh my god this got so complicated compared to before. total bad move on their part. – Glauconite 23/2, 2024 at 12:14

As per Next.JS documentation the root layout (RootLayout) has replaced the _app.js and _document.js files. Look into documentation.

Goatsbeard answered 6/9, 2023 at 15:30 Comment(2)

Please add some more information into the answer itself. Referencing to a source is great, however please also add the relevant parts of the source to your answer. – Tonnage 8/9, 2023 at 18:22

If documentation were clear, this question would not exist. Please add context and healthy criticism. :P – Attire 15/11, 2023 at 18:57

Official Example: 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>
  );
}

Peeler answered 2/11, 2023 at 5:59 Comment(0)

Recommended topics

Hot tags