Next.js Discord

Discord Forum

How to over-ride the parent layout inside deep nested dynamic page

Answered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
└── app
    └── (route)
        └── application
            └── [applicationId]
                ├── blog/
                │   ├── [id]
                │   │   └── page.tsx ------ This page shouldn't have to contain the layout content
                │   └── page.tsx
                └── layout ------------------------- This is root layout which I want to over-ride inside the dynamic page of blog


I have tried this file structure with layout but not working
└── app
    └── (route)
        └── application
            └── [applicationId]
                ├── blog/
                │   ├── (route) ----- add route grouping
                │   │   ├── [id]
                │   │   ├── layout.tsx ------ add layout with children only
                │   │   └── page.tsx
                │   └── page.tsx
                └── layout
Answered by Jboncz
export default function Page(props) {
  console.log(props)
  
  return (
    <>
      you are here
    </>
  );
}


Navigating to the page only shows { params: {}, searchParams: { hello: 'no' } } think that article may be no longer accurate sorry about that.
Here is an article with alot better explanations: https://www.propelauth.com/post/getting-url-in-next-server-components
View full answer

29 Replies

American black bearOP
Need help on this this
Jboncz
Think you would have to build a context to traverse back up the dom
@American black bear Need help on this this
Jboncz
Also please dont bump your post an hour after its creation. There are alot of questions and we do this for free.
American black bearOP
@Jboncz So it's not possible using built-in nextjs group routing and other staff?
Jboncz
Sec I can show you a example from my personal project. I dont know if my way is the only way, its just how I do it.
Jboncz
export function NavigationBar({ left, center, right }) {
    const searchParams = useSearchParams();
    const noNav = searchParams.get('noNav')

    if (noNav === 'true') {
        return null;
    }

    return (
        <div className="bg-navbar text-white grid items-center pt-1 pb-1 grid-cols-206020">
            <div className="flex justify-start items-center ml-2">
                {left}
            </div>
            <div className="flex justify-center items-center">
                {center}
            </div>
            <div className="flex justify-end items-center mr-2">
                {right}
            </div>
        </div>
    )
};


Layout
export default function RootLayout({ children }) {

    return (
        <div>
            <ReauthProvider>
                <NavigationBar left={<Navigation />} center={<Title />} right={<Profile />} />
                {children}
            </ReauthProvider>
        </div>
    )
}
So you can see, if noNav == 'true' I return null. Which means it doesnt render the navbar at all.
Im of course using SearchParameters instead of forcing it, so anyone could change the search parameters but the principle applies just the same, you would have to use a context provider that your layout decides what to render based on some context from that provider
American black bearOP
@Jboncz Oh okay thanks, BTW I was confused that I was missing something, mean I thought there was direct way in nextjs. I think I solved it using middleware by gettting the current pathname in layout
Jboncz
That works too.
American black bearOP
@Jboncz I used middleware to get the pathname in server component, Do you know other way to get the pathname in server component ?
Jboncz
yep one sec
American black bearOP
@Jboncz Wow, so this tiny function solve the issue
// @ts-ignore
import { cache } from "react";

export default <T>(defaultValue: T): [() => T, (v: T) => void] => {
  const getRef = cache(() => ({ current: defaultValue }));

  const getValue = (): T => getRef().current;

  const setValue = (value: T) => {
    getRef().current = value;
  };

  return [getValue, setValue];
};
Jboncz
I have no idea what that code does.
lol
but im glad it fixed it for you!
American black bearOP
oh okay, anyways thanks so much
@Jboncz yep one sec
American black bearOP
Can I ask little more about the blog post you wrote?
Jboncz
I didnt write it, but sure.
American black bearOP
what does it mean by
"You can easily use the params prop of page components to retrieve the pathname at that particular page. You can then do prop drilling to pass this pathname to child server components."
prop drilling the params ?
little bit confused how it works
Jboncz
Let me show an example one sec
Jboncz
export default function Page(props) {
  console.log(props)
  
  return (
    <>
      you are here
    </>
  );
}


Navigating to the page only shows { params: {}, searchParams: { hello: 'no' } } think that article may be no longer accurate sorry about that.
Here is an article with alot better explanations: https://www.propelauth.com/post/getting-url-in-next-server-components
Answer
American black bearOP
@Jboncz Thank you so much for the help
@Jboncz I used the above to solve it on my solution 😅
Jboncz
Theres so many changes all the time, hard to keep track!
American black bearOP
Yeah, That's why this discord channel have life saver like you! I'm glad to be a Nextjs Discord community member....... I hope somebody with same issue find this useful!!