Next.js Discord

Discord Forum

Page not found when it clearly exists

Unanswered
Red-legged Kittiwake posted this in #help-forum
Open in Discord
Red-legged KittiwakeOP
localhost:3000 is showing 404, but, as shown in the ss, a page is there
i tried deleting .next and restarting dev server but issue persists
it was fine yesterday, but this morning it stopped working
it's probably some really stupid thing i forgot to do (still getting used to nextjs)

25 Replies

Red-legged KittiwakeOP
Red-legged KittiwakeOP
i created a new nextjs project and copied everything over
it worked
but then when i reopend my computer
it shows 404 again
Red-legged KittiwakeOP
anybody have any idea what might be causing this?
Great golden digger wasp
can you share your page.tsx and layout.tsx
@Red-legged Kittiwake anybody have any idea what might be causing this?
gin
first dont put any src or folders into your app folder
it could be a caching issue on your end, make sure to clear your cache
otherwise yeah show your page.tsx and layout.tsx
@Red-legged Kittiwake i created a new nextjs project and copied everything over
Red-legged KittiwakeOP
i did this again, carefully copying each file and reloading to make sure no 404, and so far no issues
@Great golden digger wasp can you share your page.tsx and layout.tsx
Red-legged KittiwakeOP
layout.tsx:
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "@/app/globals.css";
import { ThemeProvider } from "@/components/theme-provider";
import ThemeToggle from "@/components/theme-toggle";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="h-screen" suppressHydrationWarning>
      <head />
      <body
        className={`h-full bg-background text-foreground ${inter.className}`}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <ThemeToggle />
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

and page.tsx:
export default function Home() {
   return <div>homepage</div>
}
@gin first dont put any src or folders into your app folder
Red-legged KittiwakeOP
do you mean the styles folder?
i thought that was the shorthand for <head></head>
gin
u dont need head in your layout
Red-legged KittiwakeOP
i copied that from shadcn when setting up dark mode
not sure waht it does tho
@gin u dont need head in your layout
Red-legged KittiwakeOP
oh rlly
ok
gin
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
use this above your RootLayout
its the same as using head
Red-legged KittiwakeOP
ok