In SSR when I am using Next.js App Router, How can I get full URL of the current page?

I cannot use window.location.href as window is not defined and with useRouter() I cannot get full URL

In SSR when I am using Next.js App Router, How can I get full URL of the current page?

I cannot use window.location.href as window is not defined and with useRouter() I cannot get full URL

• javascript
• typescript
• next.js
• next.js13

3 Answers 3

Create a middleware.ts (or .js) in the root of your project. (https://nextjs/docs/app/building-your-application/routing/middleware)

import { NextResponse } from 'next/server';

export function middleware(request: Request) {
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-url', request.url);

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

then use headers in your layout or page. (https://nextjs/docs/app/api-reference/functions/headers#headers)

const requestUrl = headers().get('x-url')

I realise this is not a solution applicable to all use cases or a straightforward answer to the question, but you can use the spread operator to get all url params, regardless of how many params there are. So for example:

/app
  - page.tsx
  - layout.tsx
  /[...slug]
    - page.tsx

In your /[...slug]

const DetailPage = async ({ params }) => {

  console.log(params.slug)

  return (
    <div>...</div>
  )
}

So www.website./hello/there/how/are/you will return ['hello', 'there', 'how', 'are', 'you'].

And you could then re-construct your url if you know your baseUrl (which I assume you will)

You are absolutely right, since there is no window object in SSR window.location.href can't be used and useRouter() hook is available on the client side only. However with useRouter hook you can get the current path name in the SSR

Potential Solution

install the package npm install nextjs-current-url

you can use the getURL function from nextjs-current-url package. It takes req object as input that is available in the getServerSideProps.

export async function getServerSideProps(context) {
  const { req } = context;
  const the_url = await getUrl({ req });

  return {
    props: {
      the_url,
    },
  };
}

Usage in your ponent

const YourComponent = ({ the_url }) => {
  return (
    <div>
      <h1>{the_url}</h1>
    </div>
  );
};

export default YourComponent;

UPDATED

You can use it with AppRouter as well. You can just import it and use it with an await keyword.

import { getUrl } from 'nextjs-current-url';

const YourComponent = () => {
  const url = await getUrl();

  return (
    <div>
      <h1>{url}</h1>
    </div>
  );
};

export default YourComponent;

UPDATED 2nd version

remember the example above for serverSideProps, you can use similar approach. you can use the context object. The context object contains information about the current request

import { getUrl } from 'nextjs-current-url';

const ServerComponentLayout = ({ children }) => {
  const the_url = getUrl({ req: context.req });

  return (
    <div>
      {children}
      <p>URL: {the_url}</p>
    </div>
  );
};

export default ServerComponentLayout;

Then in your ponent

<ServerComponentLayout>
  <h1>My Component</h1>
</ServerComponentLayout>