Pathname from layout.ts at new app structure (nextjs 13)

[ludersGabriel]

Hi! I'm trying to write a simple "middleware" to protect some routes in a demo app using nextjs 13. The way I'm going about this is trying to get the current path I'm loading into via serverside in a layout.ts at "/" level.

Since everything that happens inside this layout.ts happens in all pages, is server side and I'm already getting the user info, so I know if he is logged in or not, it seemed like a good idea. However I could not find a way to get the current path to check if I'm not already at a login page or not.

The ideia is simple:

if in "login" && !user ? do nothing : redirect(login)

Is there a way to get the current path server side in a layout?

[volnei]

Looking for it too 😢

[axelhzf]

I had a similar problem. I was thinking that it would be similar to access to the request headers (but the requestStore does not contain that information)

So probably we need a new server component function :(

[montanaflynn]

I need the pathname for highlighting current page in header navigation.

[thexpand]

You can easily do this post-render on the client side with a little bit of JavaScript. Otherwise, you would be sacrificing performance - the header navigation will be dynamic and won't be cached. You definitely don't want that.

[imprisonedmind]

Took me a while to find:

https://beta.nextjs.org/docs/api-reference/use-pathname

[montanaflynn]

That's only for client components, we need it for server components.

[imprisonedmind]

// ✅ This pattern works. You can pass a Server Component
// as a child or prop of a Client Component.
import ClientComponent from "./ClientComponent";
import ServerComponent from "./ServerComponent";

// Pages are Server Components by default
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  );
}

Create a client component with path details etc,

Store sever component as a child.

[ludersGabriel]

That will have the same screen flash problem. I need to know at server time which route I can render.

Already tried using the hook and it's not a good solution for my use case.

[pranavks]

Need the same to get the current page url for SEO purpose.

[lajoslengyel]

Hi!

Couple days ago I faced the same issue and didn't find anything about that. So here is my solution:

In the middleware.ts (or .js) the requested pathname is accessible and you are able to modify the request headers.
So simply set a custom header (in my example x-next-pathname) and later you can use it in the server rendered layout.tsx file.

// middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export default function middleware(request: NextRequest) {
    const requestHeaders = new Headers(request.headers);
    requestHeaders.set('x-next-pathname', request.nextUrl.pathname);

    return NextResponse.next({
        request: {
            headers: requestHeaders,
        },
    });
}

export const config = {
    matcher: [
        '/((?!api|_next/static|_next/image|favicon.ico).*)',
    ],
};

// layout.tsx

import { PropsWithChildren } from 'react';
import getUser from '@/lib/get-user';
import { headers } from 'next/headers';
import { redirect } from 'next/navigation';

export default async function Layout({ children }: PropsWithChildren) {
    const user = await getUser();
    const pathname = headers().get('x-next-pathname') as string;

    if (!user && pathname !== '/login') {
        redirect('/login');
    }

    if (user && pathname === '/login') {
        redirect('/');
    }

   return (
      // ...
   )
}

[ivanmeda993]

For me it's not working with 'x-next-pathname' you can also try

  const headersList = headers();
  const referer = headersList.get("referer");

  console.log("PATHNAME", referer);

[ludersGabriel]

Thanks, man. That seems like a good idea. Gonna try it later

[leerob]

I would not recommend using this approach. From the docs:

Partial rendering means only the route segments that change on navigation re-render on the client, and any shared segments are preserved.
For example, when navigating between two sibling routes, /dashboard/settings and /dashboard/analytics, the settings and analytics pages will be rendered, and the shared dashboard layout will be preserved.

Layouts might not run on every page navigation, so this code could be problematic. I would recommend moving the logic to handle redirects into Middleware (which it can do) such that it can run on every page navigation. You can also limit where the Middleware runs using the matcher.

[sambowenhughes]

@leerob Have you got any more context around this? Struggling to understand what exactly you mean in the above comment. Pulling my hair out trying to get this working 😭

[guotie]

awesome!
I have another question, How to pass user to page component?

[miguelocarvajal]

This is what has worked for me:

  const currentUrl = headers().get("next-url");

  console.log("Current URL", currentUrl);

[Eugene-Mokrushin]

@satarovbekzhan Nifty! Worked for me as expected. Thanks!

[abhishekprajapati1]

@satarovbekzhan For me it is not working I am getting undefined. I am using typescript so I can show you the warning

Property 'props' does not exist on type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor> | Iterable | ReactPortal | PromiseLikeOfReactNode'.
Property 'props' does not exist on type 'string'.

and it seems correct.

EDIT: I am working with NextJS 14.0.4 with turbopack

[xyba1337]

@abhishekprajapati1 Not sure if you still need this, but you can simply do:

const pathname = (children as any).props?.childProp?.segment;

[abhishekprajapati1]

Thanks man but I started using a wrapper component with "use client" directive to decide what to do for a specific pathname.

[abhishekprajapati1]

@abhishekprajapati1 Not sure if you still need this, but you can simply do:

const pathname = (children as any).props?.childProp?.segment;

seems promising though

[nathandaly]

If this helps anyone in the future.

My stack is:

• Next Auth
• Pocketbase
• shadcn/ui

// /app/layout.tsx

import './globals.css'
import React from 'react'
import { Inter } from 'next/font/google'
import {Providers} from './providers'
import {cookies} from 'next/headers'
import MainNav from "@/components/main-nav";
import UserNav from "@/components/user-nav";
import { headers } from "next/headers";
import AuthActionButton from "@/components/AuthActionButton";

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

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}): Promise<Element> {
  const isLoggedIn: boolean = cookies().has('pb_auth')

  return (
    <html lang="en" className="h-full" suppressHydrationWarning>
      <body className="h-full">
      <Providers>
        <div className="border-b">
          <div className="flex h-16 items-center px-4">
            <MainNav className="mx-6"/>
            <div className="ml-auto flex items-center space-x-4">
              {!isLoggedIn && <AuthActionButton />}
              {isLoggedIn && <UserNav />}
            </div>
          </div>
        </div>
        <main className="mx-auto">{children}</main>
      </Providers>
      </body>
    </html>
  )
}

// /components/AuthActionButton.tsx

'use client'

import {Link} from "@nextui-org/react";
import {usePathname} from "next/navigation";
import {JSX} from "react";
import {Button} from "@/components/ui/button";

export default function AuthActionButton(): JSX.Element {
  const pathname: string = usePathname()

  return (
       <Link href={pathname === '/auth/signin' ? '/auth/signup' : '/api/auth/signin'}>
           <Button>{pathname === '/auth/signin' ? 'Sign up' : 'Sign in'}</Button>
       </Link>
   )
}

[artemis-prime]

That was not the OPs issue. He wants it in a server component

[gregg-cbs]

I cant believe this is not a thing and that there is no feedback from nextjs. Surely the server should know what route is being hit otherwise how does it know which pages to render? Doesnt make sense that you cannot get the url or pathname of a route in a server component.

How do you use this thing:
https://nextjs.org/docs/app/api-reference/functions/next-request

[Georgegriff]

In the same vein as path names not being available in layouts... query params too:

Unlike [Pages](https://nextjs.org/docs/app/api-reference/file-conventions/page), Layout components do not receive the searchParams prop. This is because a shared layout is [not re-rendered during navigation](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#3-partial-rendering) which could lead to stale searchParams between navigations.

To me, this makes nested layouts that do anything beyond rendering HTML i.e. data fetching completely pointless because you can't use the url to drive the state of your application for your data fetching.. like every good web app should do. Back to client side data fetching to avoid the chaos

[leerob]

Edit: Also see #43704 (comment)

If you need to access to the pathname outside the page, the solution is to usePathname().

'use client'
 
import { usePathname } from 'next/navigation'
 
// This a client component, still prerendered
export function Pathname({ children }) {
  const pathname = usePathname()
  return (
    <div>
      <p>Path: {pathname}</p>
      {children}
    </div>
  )
}

---

// Some nested layout where you don't have `params` and `searchParams` as props
// The child page can be a server component!
export default function DashboardLayout({ children }) {
  return (
    <div>
      <Pathname>
        {children}
      </Pathname>
    </div>
  )
}

• Yes, this a client component, and yes, that is okay!
• You can mix client and server components, so the client component could have children that are server components
• Client components are still prerendered – this is similar to how the Pages Router works
• Cookie checks or redirects can be handled early in Middleware

[williamlmao]

@leerob this seems super awkward to do if I need to do it the root layout file. Really wish there was a function we could call here!

[xyba1337]

The layout in my app folder is the same for all routes! Take a look at this code snippet:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning className={inter.className}>
      <head />
      <body className={clsx("min-h-screen bg-background antialiased")}>
        <AuthProvider>
          <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
            <div className="relative flex min-h-screen flex-col">
              <Navbar />
              <main className="container mx-auto max-w-7xl flex-grow px-6">
                {children}
              </main>
              <Footer />
            </div>
          </Providers>
        </AuthProvider>
        <Toaster />
      </body>
    </html>
  );
}

But here's the problem - if I want to make an exception just for the "/signup" route, it's impossible without manually hard-coding the main tag + classnames to each component.

I want to be able to just do:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = // ...

  return (
    <html lang="en" suppressHydrationWarning className={inter.className}>
      <head />
      <body className={clsx("min-h-screen bg-background antialiased")}>
        <AuthProvider>
          <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
            <div className="relative flex min-h-screen flex-col">
              <Navbar />
               {pathname !== "/signup" ? (
                  <main className="container mx-auto max-w-7xl flex-grow px-6">
                    {children}
                  </main>
                ): (
                  <main>
                    { children }
                  </main>
                )}
              <Footer />
            </div>
          </Providers>
        </AuthProvider>
        <Toaster />
      </body>
    </html>
  );
}

It's such a frustrating developer experience! I can't believe there isn't a better solution for this yet!

[abhishekprajapati1]

@xyba1337

{pathname !== "/signup" ? (
    <main className="container mx-auto max-w-7xl flex-grow px-6">
        {children}
    </main>
    ) : (
    <main>
        { children }
    </main>
)}

here you can do something like following

"use client"
import React from 'react';
import {usePathname} from 'next/navigation';

export default ClientComponent = ({children}: {children: React.ReactNode}) => {
    const pathname = usePathname();
    
    if(pathname !== "/signup"){
         return (
             <main className="container mx-auto max-w-7xl flex-grow px-6">{children}</main>
         );
    }
    
    return (
        <main>{children}</main>
    );
}

And then in your layout.tsx

import ClientComponent from "path/to/ClientComponent";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = // ...

  return (
    <html lang="en" suppressHydrationWarning className={inter.className}>
      <head />
      <body className={clsx("min-h-screen bg-background antialiased")}>
        <AuthProvider>
          <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
            <div className="relative flex min-h-screen flex-col">
              <Navbar />
                   <ClientComponent>{ children }</ClientComponent>
              <Footer />
            </div>
          </Providers>
        </AuthProvider>
        <Toaster />
      </body>
    </html>
  );
}

I hope this is helpful.

[njarraud]

• Auth or redirects should be handled earlier than here, in Middleware, ideally

Only if the middleware could use the node runtime... 🙄 e.g. mongodb drivers cannot be used at the moment seriously limiting the authentication solution aka session based auth. So we have to default to other solutions.

[leerob]

^ Middleware can now use the Node.js runtime, so if you want to do early cookie checks there, it is possible. You would still want further auth checks later in your application, but for quickly redirecting to the dashboard, or home page, it works well for that.

Another option I didn't mention here is using parallel routes. With those, you can still use server components and have access to params, so you can mark the component async and do you data fetching there.

[bambrose24]

I don't understand why there can't be a function from next/navigation that is use-able in server components that, similar to cookies() and headers(), opts the layout/page out of cached rendering. I really really want to just be able to do

export default async function Layout({children}) {
  const path = pathname();
  const session = await getSession();
  if (!session) {
    redirect(`/login?redirect=${path}`);
  }
  return <div>{children}</div>
}

I don't want to use middleware because I don't want it to be global for all pages and have to select which routes it runs for, that's a nighmare to maintain. I also don't really trust the middleware runtime at this point. Having this in RSC would be so simple IMO.

[abhishekprajapati1]

@T04435 Okay so here is the fact: There is a defined flow for client and server components. There are some rules designed to complement the next' way to deal with routing, rendering, and hydrating the DOM.

'use client';

const ClientPath = () => {
  const pathname = usePathname();
  const id = getIdFromPathname();

  return (
    <div>
      <ServerComponentAsync id={id} />
    </div>
  )
}

You are trying to make a server component rely on a client component to fetch something from DB. And at the same time you want to show that data... no..no you want to pre-render that data. That is not possible.

Allow me to explain: The client component is something that needs the browser's feature in some way to get the job done. In this case, it relies on the usePathname() hook. And from the react's rule, if you import a server component into a client component it will be considered as a client component. So coming to your solution. You should always move client functionalities to the leaf node in the component tree. But sometimes, you would like to add some functionalities on top of a server component while keeping it a server rendered component. You can use wrapper components like below.

'use client';

const ClientPath = ({children}) => {
  const pathname = usePathname();
  const id = getIdFromPathname();

  return (
    <div>
     // you can do something with that id here... again you can't connect both type of components from here..
     {children}
    </div>
  )
}

some where in your server component, you can use it like below
....
...
<ClientPath>
    <ServerComponent />
</ClientPath>
...
...

While this will keep you server component a server component but this is not something you want. You want to render the fetched result here... right ? So as I said you have to access that id from the page component move them inside your component tree through prop drilling till it reaches your server component. Then only you can fetch and render the data.. here is how it will look like

export default page = ({params: {id}}) => { 
    // assuming you have dynamic routes named [id]. if you are trying to access from query params 
    // use `{searchParams: {id}}` instead
    return (
        <ClientPath>
            <ServerComponent id={id} /> // now your server component is still a server component
        </ClientPath>
    );
}

I saw many people want to have the flexibility to merge both types but understand why it is recommended to keep them separate. I am sure they will be working towards such a feature. The next team has explained its importance and usage very well here. Do consider additional reading section as well to get a better idea.

IMPORTANT Note that I haven't marked my page component as a client component since it is important to be a server component if you want to pre-render your data maybe for SEO or something.

[T04435]

@abhishekprajapati1 First thanks for the detailed answer.

What I have in my app is a Chat with messages in it. the ID I need is the per message to then get extra data from the DB from other tables. The searchParams in this route is /chat/[chatId]

// Chat.tsx this is client as it has hooks
import { useChat } from 'ai/react';

'use client';
...
return (<Chat>
   {messages.map(message => (<ChatMessage message={message} >
     <MessageActionsServer messageId={message.id} /> // this one is the issue
   </ChatMessage>
   ))}
 </Chat>)
 
 
 // MessageActionsServer.tsx
 
 MessageActionsServer = async ({messageId}: {messageId: string}) => {
   const otherData = await db.otherTable.getByMessageId(messageId);
   
   return (...)
 
 }

Is there a way to get this working...?

From your answer I see that my issue is the Chat.tsx having the 'use client' on it.
Is there a way to pass the server component from a grandfather :) server component 🤯

Thanks in advance

[abhishekprajapati1]

@T04435 Bro, I don't know why you want to make your MessageActionsServer component a server component. From your code I can see it has already been imported in a client component from now on in the component tree it will remain a client component.

Now I can see you are trying to get message content for a particular messageId. You can get the data using a route handler & dynamic route segment and later your client component can make a normal fetch request to the endpoint.

/app/chats/[chatId]/page.tsx

'use client';

import React from 'react';
import Message from './Message';

interface ChatDetailsPageProps {
  params: { chatId: string };
}

// it doesn't need to be a nested page it can be a normal client component as well.
const ChatDetailsPage: React.FC<ChatDetailsPageProps> = ({
  params: { chatId },
}) => {
  // may be you are getting messages from a hook
  // let messages = useChat(chatId);
  let messages = [{ id: 'someid' }];
  return (
    <div>
      {messages.map((message) => (
        <Message key={message.id} message_id={message.id} /> // this don't need to be a server component
      ))}
    </div>
  );
};
export default ChatDetailsPage;

/app/chats/[chatId]/api/route.ts

import { NextRequest, NextResponse } from 'next/server';

export async function GET(
  req: NextRequest,
  { params }: { params: { chatId: string } }
) {
  const searchParams = req.nextUrl.searchParams;
  const message_id = searchParams.get('message_id'); // you will be passing message_id in the api

  // you can perform your data fetching from db.

  return NextResponse.json({
    chatId: params.chatId,
    messageId: message_id,
    content: 'Some random message content',
  });
}

Now your Message component can use fetch API to get the data easily.

/app/chats/[chatId]/Message.tsx

'use client';
import React from 'react';
interface MessageProps {
  message_id: string;
}
const Message: React.FC<MessageProps> = ({ message_id }) => {
  const [data, setData] = React.useState<{
    chat_id: string;
    message_id: string;
    content: string;
  } | null>();

  const fetchData = async () => {
    try {
      const response = await fetch(
        'http://localhost:3000/chats/your_chat_id/api?message_id=' +
          message_id
      );
      const data = await response.json();
      setData(data);
    } catch (error) {
      console.error(error);
      setData(null);
    }
  };

  React.useEffect(() => {
    fetchData();
  }, [message_id]);

  if (!data) return <div>Some thing went wrong...</div>;

  return <div>{JSON.stringify(data)}</div>;
};

export default Message;

By the way if you want to perform actions on a particular message. You can do so by server actions while keeping your component a client component.

The thing is you shouldn't complicate things by going the way that is simply not recommended. Frameworks are not just libraries. They are frameworks because they do enforce some pattern of doing things. Thanks for reading, I hope this helped.

[T04435]

@abhishekprajapati1 Thanks again for your answers and time.

I was trying to find a way to avoid, going back to client fetch(). It seems that is the only way for now.

👍🏼

[abhishekprajapati1]

@abhishekprajapati1 Thanks again for your answers and time.

I was trying to find a way to avoid, going back to client fetch(). It seems that is the only way for now.

👍🏼

Actually if you want to make it server component, you should consider fetching chats using fetch api rather than wrapping up it inside the useChat hook. Once the parent becomes a server itself you can make your Messages component a server component too.

[dkildar]

That's too strange to close this issue w/o answering to the real question. Let's vote to make it open again

[ElectricCodeGuy]

The answer is, there is no reason you would ever need the pathname inside a server component. Access to params and searchparams solves 99.9% of all use cases.

[dkildar]

I would like to switch tabs in layout depending on pathname. Is it enough case?

[ElectricCodeGuy]

Move it inside a component, make it 'use client' and import it into your layout component.
Now make a page.tsx for each route you want to switch between, so just basic navigation or make a dynamic route and read the params inside that.

You can also wrap layout inside a client component and have the pathname/param inside this. There are even more options.

I encourage you to read: https://nextjs.org/docs/app/api-reference/file-conventions/layout

[typeofweb]

I want to redirect to /login?next=… where next is the pathname user tried accessing but was not authenticated.

[abhishekprajapati1]

@typeofweb What's the problem you're facing in doing that?

[Dezmonter]

Ideally, any server component should have access to the parameters, even the RootLayout

[nagyatka]

I encountered the same problem during development and think I have found a solution.

My use-case: I'm developing a website where the client's request was to dynamically display their logo in the header section of the page, depending on the URL slug.

Putting the header component in the RootLayout seemed obvious since it always belongs there. Then, I ran into the problem of not being able to access the URL of the displayed page in ServerComponent.

I tried a lot of things, but finally, I realized that I made a theoretical error.
The official documentation for layouts says: A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render.
-> This means that even if I manage to somehow force the url parameters into the page when the user navigates within the page (e.g. from the /kids page to the /women page), the logo will not change.

The solution, in my case, was to take the Header component out of the root layout and put it into the app/[slug]/layout.tsx instead. Here, the slug becomes accessible:

type PageParams = {
    slug: string
}

export default async function Layout({
    children,
    params,
}: {
    children: React.ReactNode
    params: Promise<PageParams>
}) {
    console.log('params', await params)
    return <div>{children}</div>
}

The disadvantage of this solution is that you have to define a separate header in the layout for each subpage.

Hope this helps someone.

[ElectricCodeGuy]

This is not a good idea. What you are effectively doing here is destroying the component each time the slug changes and re-rendering it.
Why do you not just put the header in the root layout and then inside the header component mark it with "use client" and import usePathname or useParams or whatever you need to conditionally render the logo or other elements?

One of the main design philosophies of server components is to keep client-side code minimal by only making specific leaf components client-side, rather than entire sections of your application. You could also just make part of your header client side, so the part that relies on the url. Same goes if you don't want to render the header on specific path. You just return null if path === x

You should generally not have a layout.tsx inside a dynamic [] component since you destroy it on each new param making it kind of pointless

[nagyatka]

Basically I agree with you, but I have to fetch data based on the queried slug and I want to render the result on server side. Maybe, I still misunderstand something, but I think in this unique use-case it can be a good solution. If this is not true, I welcome any suggestions. :)

[ElectricCodeGuy]

In cases like this, I would suggest using route groups.

[ashinkuniyil]

I had a similar situation where I needed to render a different header and footer for specific routes. In my case, I couldn’t use usePathname. Below is the solution I implemented