How can I get the url pathname on a server component next js 13 [duplicate]

Take a look at https://github.com/vercel/next.js/issues/43704 , pauliusuza solved this issue

You can do a workaround using a middleware

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-url', request.url);

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

Then use it from inside of a root layout:

import { headers } from 'next/headers';

export default function RootLayout() {
  const headersList = headers();
  // read the custom x-url header
  const header_url = headersList.get('x-url') || "";
}

Hope that helps

Alternatively, I think an even easier solution would be to use Next's headers already present in the request, like host or refer.

Example:

import { headers } from 'next/headers';

export default function Navbar() {
    const headersList = headers();
    const domain = headersList.get('host') || "";
    const fullUrl = headersList.get('referer') || "";

    console.log(fullUrl);
}

NextJS v14 Serverside get Pathname

 import { headers } from "next/headers";

 const heads = headers()

 const pathname = heads.get('next-url')

Heads-up: it might have performance implications. From the NextJS documentation:

Good to know:

headers() is a Dynamic Function whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into dynamic rendering at request time.

About dynamic rendering

Important! The VP of Product @vercel discourages the use of the next-url header

create a middleware.ts in the src dir of your app, it would be responsible for urls of your application, i added some other useful properties such as origin which is good for calling internal api and the pathname for accessing the path of your component; note that it only can be used inside server component

import { NextResponse } from 'next/server';

export function middleware(request: Request) {

const url = new URL(request.url);
const origin = url.origin;
const pathname = url.pathname;
const requestHeaders = new Headers(request.headers);
requestHeaders.set('x-url', request.url);
requestHeaders.set('x-origin', origin);
requestHeaders.set('x-pathname', pathname);

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

and in your server components use it like

import { headers } from "next/headers";

export default async function page() {

    const headersList = headers()
    const header_url = headersList.get('x-url') || "";
    const pathname = headersList.get('x-pathname');
    const origin_url = headersList.get('x-origin');

}

This finds the pathname assuming you got a referer cookie:

import { headers } from 'next/headers';

const domain = headersList.get('host') || "";
const fullUrl = headersList.get('referer') || "";
const [,pathname] = fullUrl.match( new RegExp(`https?:\/\/${domain}(.*)`))||[];

console.log(pathname);

This answer is almost correct . Using app directory with src pattern I realized that I need to change the middleware.ts placement like the following.

.
├── src
│   ├── app
│   └── middleware.ts