Configura el alojamiento de subrutas con Vercel.

Puedes alojar tu centro de ayuda Notiondesk en una subruta de tu sitio web usando Vercel y Next.js.

Por ejemplo, en lugar de usar un subdominio como help.yourdomain.com, puede servir su centro de ayuda desde: yourdomain.com/help, yourdomain.com/docs o yourdomain.com/support.

Esta configuración resulta útil cuando su sitio web ya está alojado en Vercel y desea que su documentación, base de conocimientos o contenido de soporte permanezcan bajo el mismo dominio.

En esta guía, aprenderá a configurar un proxy de Next.js para que los visitantes puedan acceder a su centro de ayuda directamente desde la subruta que elija, sin modificar su sitio web principal.

Antes de empezar

Antes de configurar el alojamiento de subrutas con Vercel, asegúrese de tener lo siguiente:

Un centro de ayuda existente Notiondesk

Acceso a tu proyecto Vercel

Acceso al código fuente de su sitio web

Un sitio web implementado en Vercel

Una subruta que quieras usar para tu centro de ayuda, como por ejemplo:
- __CONSERVADO_21__
- __CONSERVADO_20__
- __CONSERVADO_19__

El alojamiento de subrutas está habilitado en Notiondesk

Esta guía asume que su sitio web está construido con Next.js y desplegado en Vercel. Consulte la compatibilidad con otros proveedores aquí: Aloje su centro de ayuda en una subruta .

Habilitar el alojamiento de subrutas en Notiondesk

Abre tu panel de control Notiondesk y ve a Settings > General.

Desplácese hasta la sección Domains y, a continuación, active el interruptor Subpath.

Seleccione Vercel como proveedor de configuración. Notiondesk generará el código proxy de Vercel/Next.js para su centro de ayuda.

Copia el código generado. Lo añadirás a tu proyecto Next.js en el siguiente paso.

Agrega el archivo proxy a tu proyecto Next.js.

Después de copiar el código generado desde Notiondesk, agréguelo a su proyecto Next.js.

El nombre del archivo depende de tu versión de Next.js:

Para Next.js 15 o versiones anteriores, utilice middleware.ts

Para Next.js 16 o superior, utilice proxy.ts

Agrega el archivo en la raíz de tu proyecto:

O bien, si su proyecto utiliza un directorio src:

Para Next.js 16 o superior, utilice la misma ubicación pero con proxy.ts en su lugar.

Pegue el código generado por Notiondesk en este archivo.

Este proxy reenviará las solicitudes de la subruta seleccionada, como /help, a su centro de ayuda Notiondesk sin cambiar la URL en el navegador.

Configurar el comparador

El comparador le indica a Next.js qué rutas debe manejar el proxy Notiondesk.

Para un centro de ayuda alojado en /help, el comparador debe incluir:

Si está utilizando una subruta diferente, como /docs o /support, reemplace /help con la subruta elegida.

middleware.ts

src/middleware.ts

matcher: ["/help", "/help/:path*", "/_nd/:path*"]

La ruta es obligatoria. Sin ella, es posible que algunos recursos y funciones del centro de ayuda no funcionen correctamente./_nd/:path*

Ejemplo de proxy de Vercel/Next.js

A continuación se muestra un ejemplo de configuración de proxy de Next.js para un centro de ayuda alojado en /help.

// Next.js <= 15: middleware.ts
// Next.js 16+: proxy.ts with export function proxy
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

const ORIGIN = "https://your-help-center.notiondesk.help";
const CUSTOM_HOST = "yourdomain.com";
const SUBPATH = "/help";

function isSubpathRequest(pathname: string) {
  return pathname === SUBPATH || pathname.startsWith(SUBPATH + "/");
}

export function middleware(request: NextRequest) {
  const isSubpath = isSubpathRequest(request.nextUrl.pathname);
  const target = new URL(request.nextUrl.pathname + request.nextUrl.search, ORIGIN);

  const headers = new Headers(request.headers);
  headers.set("Host", CUSTOM_HOST);
  headers.set("X-Forwarded-Host", CUSTOM_HOST);
  headers.set("X-Forwarded-Proto", "https");

  if (isSubpath) {
    headers.set("X-Site-Path-Prefix", SUBPATH);
  }

  return NextResponse.rewrite(target, { request: { headers } });
}

export const config = {
  matcher: ["/help", "/help/:path*", "/_nd/:path*"],
};

Este ejemplo es solo de referencia. Utilice el código generado en su panel de control, ya que los valores son específicos de su centro de ayuda, dominio y subruta seleccionada.

Implementa tu proyecto Vercel

Una vez que hayas añadido el archivo proxy y configurado el comparador, implementa los cambios en Vercel.

Confirma tus cambios

Sube tu código a tu repositorio Git

Espere a que finalice el despliegue de Vercel.

Una vez que la implementación esté activa, las solicitudes a la subruta seleccionada se enrutarán a través del proxy y serán atendidas por su centro de ayuda Notiondesk.

Verifica tu configuración

Una vez finalizada la implementación, verifique que su centro de ayuda funcione correctamente.

Abre la página principal de tu centro de ayuda. Luego, abre la URL de un artículo conocido y confirma que la página se carga correctamente.

Confirma que:

El centro de ayuda se carga bajo su dominio principal.

Las páginas de los artículos se abren correctamente.

Las imágenes, los estilos y los scripts se cargan correctamente.

La URL del navegador permanece en su dominio personalizado.

El sitio web principal continúa funcionando fuera de la subruta del centro de ayuda.

Si todo se carga correctamente, ¡la configuración de alojamiento de su subruta está completa!

Tabla de contenido