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]

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
• Auth or redirects should be handled earlier than here, in Middleware, ideally

[szymekSKKJ]

Once you get in client component there is no way to get outside. Even if you render a "server" component after "use client" it is not a server component anymore (how it would be possbile. Back to server from client?)

If you really need a pathname you can get them from children props in layout.

Every component in Next is a t a React component, so if you have acces to the child, you have acces to all their props. Even that before rendering so it is possible to get in server (because it is while all components are rendering. Including server components)

Someone higher said:

export default function Layout({ children }: { children: React.ReactNode }) {
const pathname = children?.props?.childProp?.segment;
return (

{pathname}

);
}

I'm not sure how it works in production

[maskott]

Thanks @leerob ! How then can other components in the children or nested in <Pathname> access that pathname variable?

[szymekSKKJ]

Well if you access once to frontend, you do it whatever you want. You can export it, set in signal (preact) or what else

[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!

[jikdo]

What i do is to write a client component inside the layout.js , the client component can get access the current path from usePathname hook , in your case, the client component can do the redirection

[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.

[T04435]

@leerob (or anyone that knows) Please help me understand how can I get this done.

// client component
'use client';

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

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

// server component

const ServerComponentAsync = async (id: string) => {
  const data = await db.selectFrom('table').where('id', '=', id);

  return (
    <pre>{data.field}</pre>
  )
}

So the above does not work.

The id from client component is needed as prop of the server component to fetch data

What is needed here, so it works?

Use case
I have breadcrumbs in RootLayout and I want to get data to display based on an id in path
path foo/1 => Foo > Foo.field(find foo = 1 and display field)

Thanks