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

Quick Fix: You created a Next.js app with the latest create-next-app, which uses the app directory instead of pages by default due to the App Router feature. To use the Pages Router, select "No" when asked "Would you like to use App Router (recommended)?" when creating a new project or follow the legacy Pages Router documentation: https://nextjs.org/docs/pages/building-your-application/routing.

The Problem:

When creating a Next.js app in VS Code using the command ‘npx create-next-app@latest’, the expected ‘pages’ and ‘styles’ folders are missing. Despite going through the setup process and exploring various options in the ‘Would you like to use…’ section, these folders remain absent. This is contrary to the Next.js documentation, which indicates that these folders should be present upon app creation.

The Solutions:

Solution 2: Root Layout Replaces Pages and Styles Folders

Next.js documentation indicates that the RootLayout layout has replaced the _app.js and _document.js files. This change has eliminated the need for separate pages and styles folders at the root level.

Solution 3: Customizing the “App Directory” Structure

Next.js doesn’t enforce a specific structure for your app’s directory. The "pages" and "styles" folders are not required components of a Next.js application.

To create a custom app directory structure, follow these steps:

Create a new folder named "app" in the root directory of your project.
Create a "providers.tsx" file inside the "app" directory with the following code:

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>
  )
}

Create a "layout.tsx" file inside the "app" directory with the following code:

import { Providers } from './providers'

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

Update the "_app.tsx" file to wrap your application’s components with the "RootLayout" component:

import RootLayout from './app/layout'

export default function MyApp({ Component, pageProps }: NextPage<any>) {
  return (
    <RootLayout>
      <Component {...pageProps} />
    </RootLayout>
  )
}

With this customized app directory structure, Next.js will render your application within the "Providers" and "RootLayout" components, providing the necessary context and styling for your application.

Q&A

What is different from a new Next.JS app compared to older versions?

—

App Router is the default option for new Next.js apps

What replaces the _app.js and _document.js file in Next.JS?

—

RootLayout

Can you show me an example app code?

—

See code snippet

Video Explanation:

The following video, titled "Next.js 14 Booking App (Web Scraping with Puppeteer, Scraping ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

3 days ago ... Bright Data's Scraping Browser (Free $10 Credits): https://brdta.com/kishansheth21 In this video we will learn what is web scraping and use ...

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