basePath

Para desplegar una aplicación Next.js bajo un subdirectorio de un dominio, puede utilizar 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',
}

Nota importante: Este valor debe establecerse en el momento de la 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">About Page</Link>
    </>
  )
}

HTML resultante:

<a href="/docs/about">About Page</a>

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

Imágenes

Cuando utilice 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