How to know dynamic router.pathname in app router version

[marosca]

I'm trying to migrate a web application from Next.js page routing to app routing, but I've encountered a problem. In the _app.tsx file, I can't determine the original pathname in dynamic routes. For example, if I have this structure in the pages directory:

/pages
  /[category]
    index.tsx

In the _app.tsx file's getInitialProps method, I receive the router object, and router.pathname gives me "[category]" instead of the actual category like 'dynamicCategory/...'.

For the app routing version:

/app
  [category]
    page.tsx

Is there a way in the app routing version to get these original pathnames inside layouts or pages on the server side? I know that usePathName() exists, but the response from this hook (which can only be used on the client side) is the calculated route, not the original dynamic route (i.e., the pathname inside the brackets [category]).

I've been trying to get this dynamic route from the middleware, but I haven't been successful.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  const response = NextResponse.next()
 
  response.headers.set('x-server-url', request.url)
 
  return response
}

Thanks in advance

[ananuness]

Hii! Have you tried to use the instance new Headers(...)? Also, you're trying to set headers in the Response, not in the Request! You can try correct it, if not work, then you can try this:

// /middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request: Request) {

  // Store current request url in a custom header, which you can read later
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-server-url', request.url);

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

[marosca]

Thanks but I copy paste this middleware only as an example. I still need to find a way to get the dynamic routes, something like this:
requestHeaders.set('x-server-url', ?????);

RootLayout/page
const href = headers().get('x-server-url')
I need as href the original dynamic route, as [category]

Thanks in advance

[jeafreezy]

I needed this as well, the code below is what worked for me.

import { useParams, usePathname } from 'next/navigation';

export default function useGetRawPath() {
    const params = useParams();
    const pathname = usePathname();
    const splittedRoute = pathname.split('/');

    if (typeof params === 'object' && params !== null) {
        let reconstructedPath = '';

        for (let i = 1; i < splittedRoute.length; i++) {
            const segment = splittedRoute[i];

            // Check if the segment matches any value in the params object
            const matchingKey = Object.keys(params).find(
                key => params[key] === segment
            );

            if (matchingKey) {
                // Replace the segment with the dynamic segment
                reconstructedPath += `/[${matchingKey}]`;
            } else {
                // Keep the original segment
                reconstructedPath += `/${segment}`;
            }
        }

        return reconstructedPath;
    } else {
        // Params object is not present
        return pathname;
    }
}

[jjriverab]

Sadly this kind of solution doesn't work for 2 or more slugs with the same value

[Daidalos117]

how this is not solved officially? Is there a different pattern that I am missing maybe?

[Monstass]

its almost impossible to create dynamic breadcrumbs without an ability to get route name lol

[Naveenravi07]

lol still not solved.