Next.js Discord

Discord Forum

Page that doesn't exist not leading to 404 page

Answered
Yellow-horned horntail posted this in #help-forum
Open in Discord
Yellow-horned horntailOP
Hi, I'm using the following as a starting point:

https://github.com/Trixzyy/discord-authjs-example

However, I have no idea how to set up a 404 page.

When I go to a page that doesn't exist, I simply receive the content from app/page.tsx

Not sure where to set this up but it's frustrating!
Answered by Sun bear
You do not have to inport pages like that. Just use children and it will automatically insert the content from the route
View full answer

18 Replies

Sun bear
Here you can check in the documentation, there is a section about you issue
https://nextjs.org/docs/pages/building-your-application/routing/custom-error?trk=public_post_comment-text
Yellow-horned horntailOP
Also it happens that when I create a page inside of /app, e.g. /app/page1/page.tsx it will always show that Error: The default export is not a React Component in page: "/page1".
Sun bear
sure, no problem
Yellow-horned horntailOP
I think the problem is more that when I go to any page, it will always just give me the default page.
African Slender-snouted Crocodile
hey
Yellow-horned horntailOP
if anyone is able to help much appreciated
@Sun bear I think you have to provide the code of page.tsx Most likely some wrong syntax
Yellow-horned horntailOP
Sure, here's my code
import { Metadata } from "next";
import { auth, signIn } from "@/auth";
import { Button } from "@/components/ui/button";
import { DiscordLogoIcon } from "@radix-ui/react-icons";

export const metadata: Metadata = {
  title: "12341234",
  description: "Example dashboard app built using the components.",
};

export default async function DashboardPage() {
  const session = await auth();
  const isAuthenticated = !!session;

  return (
    <div className="flex h-screen bg-background">
      <main className="flex-1 p-6">
        {isAuthenticated ? (
          <h1 className="text-3xl font-bold">Welcome, {session.user?.name}</h1>
        ) : (
          <div className="flex flex-col items-center justify-center h-full">
            <h1 className="text-3xl font-bold mb-4">Welcome to hyunGPT</h1>
            <p className="text-xl mb-8">Sign in with Discord to access your dashboard</p>
            <form
              action={async () => {
                "use server"
                await signIn("discord", { redirectTo: "/dashboard" })
              }}
            >
              <Button size="lg">
                <DiscordLogoIcon className="mr-2 h-4 w-4" /> Sign in with Discord
              </Button>
            </form>
          </div>
        )}
      </main>
    </div>
  );
}
I'm pretty sure there's no issues
Sun bear
No it looks good to me.

Its also page.tsx and not page.ts, right? Sorry sometimes thats something causing it
@Sun bear No it looks good to me. Its also page.tsx and not page.ts, right? Sorry sometimes thats something causing it
Yellow-horned horntailOP
yeah. have you gotten the chance to take a look at the github? maybe even run it on your own machine, but usually next.js will automatically give a 404 error when you go to a page that doesn't exist, but like I mentioned earlier, it just gives me the / page
@Yellow-horned horntail yeah. have you gotten the chance to take a look at the github? maybe even run it on your own machine, but usually next.js will automatically give a 404 error when you go to a page that doesn't exist, but like I mentioned earlier, it just gives me the `/` page
Sun bear
Ah i see.

Your layout.tsx is causing the issue

import type { Metadata } from "next";
import { Inter as FontSans } from "next/font/google";
import "./globals.css";

import { cn } from "@/lib/utils";
import DashboardPage from "./page";
import { ThemeProvider } from "@/components/theme-provider";

const fontSans = FontSans({
  subsets: ["latin"],
  variable: "--font-sans",
});

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">
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <DashboardPage></DashboardPage>
        </ThemeProvider>
      </body>
    </html>
  );
}



Replace
<DashboardPage></DashboardPage>


with

{children}
Yellow-horned horntailOP
let me try it
Sun bear
You do not have to inport pages like that. Just use children and it will automatically insert the content from the route
Answer
@Yellow-horned horntail let me try it
Sun bear
Please also remove the import of the dashboard page at the top
Yellow-horned horntailOP
it works! thank you so much for helping
Sun bear
You are welcome