Theo's Typesafe Cult•6mo ago

Routing Assistance

I am trying really hard to try and understand the Routing thing with NextJS and I just can't wrap my head around it. Right now, I'm just trying to scaffold out my site with generic stuff and get routing setup, but I just can't figure it out. The site when loaded at / should be the same as if a person goes to /spells (1st screenshot) Right now, if I go to /spells I see the 2nd screenshot. The content of /spells should be loading where the cards are (which is currently in (main)/_components/content/content.tsx. The same would go for if someone browses to /suggestedGear and /maskedCarnivale. The area with the cards replaced appropriately. The 3rd screenshot is my current directory structure (which is probably the problem). What is not correct in this setup for me to get the experience I am looking for?

Solution:

App dir is fun, until you make things overly complex 😛

Jump to solution

24 Replies

Kenzo•6mo ago

but thats not app dir

Caspian NightworthOP•6mo ago

hmm? i'm not following at all.

Kenzo•6mo ago

ah because you had a pages folder

Caspian NightworthOP•6mo ago

even if i move say, the spells folder outside directly under the app folder, the way it is rendered is the same i thought () meant grouping and has no impact on routing

Kenzo•6mo ago

im not sure about that XD underscore has no impact on routing

Caspian NightworthOP•6mo ago

my organization skills suck trying to keep things organized for this app

Kenzo•6mo ago

(App)
/ (page.tsx | layout.tsx) - 
/spells (page.tsx | layout.tsx)
/maskedCarnivale (page.tsx | layout.tsx)

(App)
/ (page.tsx | layout.tsx) - 
/spells (page.tsx | layout.tsx)
/maskedCarnivale (page.tsx | layout.tsx)

I ussualy use only the "/" layout.tsx, and inside the page.tsx of each folder I put the componentes that I need

Kenzo•6mo ago

Caspian NightworthOP•6mo ago

then my layout.tsx needs to be redone

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>
  );
}

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>
  );
}

Kenzo•6mo ago

well, enterily XD because the layout.tsx receives the page.tsx as prop

Kenzo•6mo ago

so this is my "/" layout.tsx

Kenzo•6mo ago

so all pages will render the Topbar

Caspian NightworthOP•6mo ago

so, for my case, i need to move the header and sidebar to the main layout to be shared across all views

Kenzo•6mo ago

yep

Caspian NightworthOP•6mo ago

what would be inside the page.tsx? because that is where i am calling the header and all that jazz

Kenzo•6mo ago

depends? the one directly under "App"? its "/" for spells page, it will be> App/spells/page.tsx

Caspian NightworthOP•6mo ago

is the root page.tsx empty or what?

Kenzo•6mo ago

Caspian NightworthOP•6mo ago

ok, i think things are starting to click

Kenzo•6mo ago

What i was sayin is that most ppl want to use a topbar, so it will be in the top layout. in /dashboard or others, you might only need the page and thats it, but if you have a submenu then you can use a second layout xD

Caspian NightworthOP•6mo ago

yas! things are clicking

Caspian NightworthOP•6mo ago

leave it to me to make things overly complex

Kenzo•6mo ago

enjoy 😄

Solution

Kenzo•6mo ago

App dir is fun, until you make things overly complex 😛

Gaming

Programming

Routing Assistance