Next.js Discord

Discord Forum

404 error when i access a route that contains a dir with page.tsx inside

Unanswered
Spotted Sandpiper posted this in #help-forum
Open in Discord
Spotted SandpiperOP
I'm new with NextJS. I'm doing the course from Next Learn. I created inside "/app" a dir named "/dashboard" with a page.tsx, and other inside "/dashboard" named "/invoices" with a page.tsx. But when i try to access http://localhost:3000/dashboard/invoices it's printing "404 | This page could not be found." and this page.tsx of this dir is like the course's suggestion. Someone now why it happens?

app/dashboard/invoices/page.tsx:

export default function Page() {
  return <p>Invoices Page</p>;
}

app/dashboard/layout.tsx:

import SideNav from '@/app/ui/dashboard/sidenav';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}


app/layout.tsx:

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}


node version: v21.7.3

next version: 14.0.2

Console error:

GET /dashboard/invoices 404 in 71ms

20 Replies

muadpn
did you created a folder literally like "/dashboard" or "dashboard"
@muadpn did you created a folder literally like "/dashboard" or "dashboard"
Spotted SandpiperOP
The names of dirs are "dashboard" and "invoices". I can access "http://localhost:3000/dashboard/", but when i try to access "http://localhost:3000/dashboard/invoices" is returning a 404 error.
muadpn
you deleted your screenshot..
Red-billed Tropicbird
Name your file like (dashboard)
I mean folder
then create all of the pages below
Like on top of your exisiting folder structure
@muadpn you deleted your screenshot..
Spotted SandpiperOP
This is my structure:
@Red-billed Tropicbird Name your file like (dashboard)
Spotted SandpiperOP
I couldn't understand. Did you say to rename my dir "dashboard" to "(dashboard)"? But i need to access the route "http://localhost:3000/dashboard/" too, is it correct?
Red-billed Tropicbird
Like this
keep your dashboard folder
but at the top make a folder like that
@Red-billed Tropicbird but at the top make a folder like that
Spotted SandpiperOP
I did your suggestion but the same error happens. I can access just the "http://localhost:3000/dashboard" and "http://localhost:3000/dashboard/invoices" is giving a 404 error.
@Red-billed Tropicbird but at the top make a folder like that
Spotted SandpiperOP
Man, i was wrong. I created a dir inside "invoices" named "page.tsx" and other file inside this dir named "page.tsx". I did a confusion but now it's working. Thanks for your help! 💩
muadpn
use expanded folder to avoid confustion maybe
Spotted SandpiperOP
What is it?
muadpn
go to vscode settings -> search for compact folders -> uncheck it
@muadpn go to vscode settings -> search for compact folders -> uncheck it
Spotted SandpiperOP
Good, you are amazing! Problem solved! :noice:
muadpn
ahhaha, yea! sometimes shit happen's.