Next.js Discord

Discord Forum

Routing Assistance

Unanswered
Caspian Nightworth posted this in #help-forum
Open in Discord
Caspian NightworthOP
I am trying to figure out routing and I am not understanding it. I have attached a screenshot of my folder structure. The problem I am having is that if I attempt to go to

- http://localhost:3000/spells
- http://localhost:3000/maskedCarnivale
- http://localhost:3000/suggestedGear

I am presented with
Error: The default export is not a React Component in page: "/spells"
Error: The default export is not a React Component in page: "/maskedCarnivale"
Error: The default export is not a React Component in page: "/suggestedGear"

I have even tried moving those folders from outside of (pages) to no avail.

Let me know if there are any files I need to provide the contents of to figure out where my disconnect is.

8 Replies

Caspian NightworthOP
page.tsx inside of (pages)/spells
export const Spells = () => {
  return <p>Spells</p>;
};
@Caspian Nightworth `page.tsx` inside of `(pages)/spells` tsx export const Spells = () => { return <p>Spells</p>; };
Dayo
should be a default export. sth like

const Spells = () => ...

then at the end of the file

export default Spells
Caspian NightworthOP
ahh, ok. now i need to figure out why it didn't display the way i thought it would
where i have those cards at should be where I see the text, of Spells
Dayo
looks like a markup issue. sure you're passing the right elements in the correct pages?
Caspian NightworthOP
right now i am just setting up a skeleton to make sure routing is set up and everything
layout.tsx
import type { Metadata } from "next";
import { Inter as FontSans } from "next/font/google";
import "@/styles/globals.css";
import { cn } from "@/lib/utils";
import { ThemeProvider } from "@/components/theme-provider";
import { AppProvider } from "./provider";

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

export const metadata: Metadata = {
  title: "Blue Mage Spell Tracker",
  description: "Locate and track your spells",
  icons: [{ rel: "icon", url: "/images/favicon.ico" }],
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={cn(
          "h-screen w-screen bg-background font-sans text-foreground",
          fontSans.variable,
        )}
      >
        <AppProvider>
          <ThemeProvider
            attribute="class"
            defaultTheme="dark"
            disableTransitionOnChange
          >
            {children}
          </ThemeProvider>
        </AppProvider>
      </body>
    </html>
  );
}

page.tsx
import { Header } from "./(header)/_components/header/header";
import { MobileHeader } from "./(header)/_components/mobileHeader/mobileHeader";
import { NavAndContent } from "./(main)/_components/navAndContent/navAndContent";

export default async function Home() {
  return (
    <div className="flex h-full w-full flex-col">
      <Header />
      <MobileHeader />
      <div className="h-px w-screen bg-border"></div>
      <NavAndContent />
    </div>
  );
}

(main)\_components\navAndContent\navAndContent.tsx
import { Content } from "../content/content";
import { Navigation } from "../navigation/navigation";

export const NavAndContent = () => {
  return (
    <div className="flex sm:h-[calc(100vh-6rem-1px)]">
      <div className="mx-auto flex min-w-0 max-w-7xl grow flex-col sm:flex-row sm:py-6">
        <Navigation />
        <Content />
      </div>
    </div>
  );
};

(main)_components\content\content.tsx (Working on a Skeleton loading issue)
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";

const getData = async () => {
  const result = await fetch("https://jsonplaceholder.typicode.com/todos/");

  // delay the response
  await new Promise((resolve) => setTimeout(resolve, 10000));

  return result.json();
};

export const Content = async () => {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unused-vars
  const data = await getData();

  return (
    <div className="flex w-screen grow flex-col overflow-y-auto px-4 sm:w-full sm:p-6">
      <div className="grid grid-cols-4 gap-8">
        {"abcdefghijklmnopqrstuvwxyz".split("").map((_, i) => (
          <Card key={i} className="flex flex-col justify-between">
            <CardHeader className="flex-row items-center gap-4">
              Card Header
            </CardHeader>
            <CardContent>Card Content</CardContent>
            <CardFooter>Card Footer</CardFooter>
          </Card>
        ))}
      </div>
    </div>
  );
};