basePath

Para desplegar una aplicación Next.js bajo un subdirectorio de un dominio, puede usar la opción de configuración basePath.

basePath le permite establecer un prefijo de ruta para la aplicación. Por ejemplo, para usar /docs en lugar de '' (una cadena vacía, el valor por defecto), abra next.config.js y agregue la configuración basePath:

module.exports = {
  basePath: '/docs',
}

Importante: Este valor debe configurarse en tiempo de compilación y no puede cambiarse sin recompilar, ya que el valor se incluye en los paquetes del lado del cliente.

Enlaces

Cuando enlace a otras páginas usando next/link y next/router, el basePath se aplicará automáticamente.

Por ejemplo, usar /about se convertirá automáticamente en /docs/about cuando basePath esté configurado como /docs.

export default function HomePage() {
  return (
    <>
      <Link href="/about">Página Acerca de</Link>
    </>
  )
}

HTML resultante:

<a href="/docs/about">Página Acerca de</a>

Esto asegura que no tenga que cambiar todos los enlaces en su aplicación cuando modifique el valor de basePath.

Imágenes

Cuando use el componente next/image, deberá agregar el basePath delante de src.

Por ejemplo, usar /docs/me.png servirá correctamente su imagen cuando basePath esté configurado como /docs.

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>Mi página de inicio</h1>
      <Image
        src="/docs/me.png"
        alt="Foto del autor"
        width={500}
        height={500}
      />
      <p>¡Bienvenido a mi página de inicio!</p>
    </>
  )
}

export default Home