javascript - Next.js 13 URL actual

En SSR, cuando estoy usando Next.js App Router, ¿cómo puedo obtener la URL completa de la página actual?

No puedo usar window.location.href ya que window no está definido y con useRouter() no puedo obtener la URL completa

Respuesta #1

Crea un middleware.ts (o .js) en la raíz de tu proyecto. (https://nextjs.org/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
    }
  });
}

entonces usa encabezados en tu diseño o página. (https://nextjs.org/docs/app/api-reference/functions/headers#headers)

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

Respuesta #2

Me doy cuenta de que esto no es una solución aplicable a todos los casos de uso ni una respuesta directa a la pregunta, pero puedes usar el operador spread para obtener todos los parámetros de la URL, sin importar cuántos parámetros haya. Por ejemplo:

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

En tu /[...slug]

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

  console.log(params.slug)

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

Entonces www.website.com/hello/there/how/are/you devolverá ['hello', 'there', 'how', 'are', 'you'].

Y entonces podrías reconstruir tu url si conoces tu baseUrl (que supongo que lo harás)