Components not loading in pages folder

So, I'm creating a webpage and I'm really new in creating pages on Next.js and also I'm using ShadCN for components.

Also, I'm adding Auth0 support for protecting pages and creating a log in.

The problem is that I created a pages folder to save my Auth0 config for login stuff and for future pages I'm going to protect.

The login works perfectly and loading the page inside of membersonly works, but the components doesn't load.

Tried :

• adding the same component folder inside of the pages folder and it didn't work at all.
• The other thing I tried was creating the page as a component and import it inside the index.tsx but not success at all.

Project/Folder Structure:

membersonly index.tsx :

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"

export default function ValorantCoachDashboard() {
  const [activeTab, setActiveTab] = useState("dashboard")

  return (
    <div className="flex h-screen bg-gray-100">
      {/* Sidebar */}
      <div className="w-64 bg-white shadow-md">
        <div className="p-4">
          <h2 className="text-2xl font-bold text-primary">Valorant Coach</h2>
        </div>
        <nav className="mt-4">
          {/* Botones de navegación */}
          <Button
            variant={activeTab === "dashboard" ? "secondary" : "ghost"}
            className="w-full justify-start"
            onClick={() => setActiveTab("dashboard")}
          >
            Dashboard
          </Button>
         
        </nav>
      </div>

      
      <div className="flex-1 p-8 overflow-auto">
        <h1 className="text-3xl font-bold">Dashboard</h1>
        {/* Contenido del dashboard */}
      </div>
    </div>
  )
}

I found out what was the error. So first of all, the /page folder doesn't need to be created (that was my bad) and all the pages need to be created in separated folders inside of /app. So for example, if you want to create a dashboard, you should create a folder called dashboard/page.tsx and inside here all the components will load correctly. Now the api folder will be moved inside of app for making sure that you import your getSession from the Auth0 Next.js library

const session = await getSession();
const user = session?.user;

After this, add the logic for making sure that the session is used and all should be working fine and the page will be protected. At least it worked in my case.