Configura l'hosting dei subpath con Vercel

Puoi ospitare il tuo centro assistenza Notiondesk in una sottocartella del tuo sito web utilizzando Vercel e Next.js.

Ad esempio, invece di utilizzare un sottodominio come help.yourdomain.com, puoi rendere disponibile il tuo centro assistenza da: yourdomain.com/help , yourdomain.com/docs o yourdomain.com/support

Questa configurazione è utile quando il tuo sito web è già ospitato su Vercel e desideri che la documentazione, la knowledge base o i contenuti di supporto rimangano sullo stesso dominio.

In questa guida imparerai come configurare un proxy Next.js in modo che i visitatori possano accedere al tuo centro assistenza direttamente dal sottopercorso scelto, senza modificare il tuo sito web principale.

Prima di iniziare

Prima di configurare l'hosting di subpath con Vercel, assicurati di avere:

Un centro assistenza esistente Notiondesk

Accesso al tuo progetto Vercel

Accesso al codice sorgente del tuo sito web

Un sito web distribuito su Vercel

Un sottopercorso che desideri utilizzare per il tuo centro assistenza, ad esempio:
- /help
- __PRESERVATO_20__
- __PRESERVATO_19__

Hosting di sottocartelle abilitato in Notiondesk

Questa guida presuppone che il tuo sito web sia stato creato con Next.js e distribuito su Vercel. Per informazioni sul supporto di altri provider, consulta questa pagina: Ospita il tuo centro assistenza su un sottopercorso .

Abilita l'hosting di sottopercorsi in Notiondesk

Apri la tua dashboard Notiondesk e vai a Settings > General.

Scorri fino alla sezione Domains, quindi abilita l'interruttore Subpath.

Seleziona Vercel come provider di configurazione. Notiondesk genererà il codice proxy Vercel/Next.js per il tuo centro assistenza.

Copia il codice generato. Lo aggiungerai al tuo progetto Next.js nel passaggio successivo.

Aggiungi il file proxy al tuo progetto Next.js

Dopo aver copiato il codice generato da Notiondesk, aggiungilo al tuo progetto Next.js.

Il nome del file dipende dalla versione di Next.js in uso:

Per Next.js 15 o versioni precedenti, utilizzare middleware.ts

Per Next.js 16 o versioni successive, utilizzare proxy.ts

Aggiungi il file nella directory principale del tuo progetto:

Oppure, se il tuo progetto utilizza una directory src:

Per Next.js 16 o versioni successive, utilizzare la stessa posizione ma con proxy.ts al posto di proxy.ts.

Incolla il codice generato da Notiondesk in questo file.

Questo proxy inoltrerà le richieste dal sottopercorso selezionato, ad esempio /help, al centro assistenza Notiondesk senza modificare l'URL nel browser.

Configura il matcher

Il matcher indica a Next.js quali percorsi devono essere gestiti dal proxy Notiondesk.

Per un centro assistenza ospitato su /help, il matcher dovrebbe includere:

Se stai utilizzando un sottopercorso diverso, ad esempio /docs o /support, sostituisci /help con il sottopercorso scelto.

middleware.ts

src/middleware.ts

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

Il percorso è obbligatorio. Senza di esso, alcune risorse e funzionalità del centro assistenza potrebbero non funzionare correttamente./_nd/:path*

Esempio di proxy Vercel/Next.js

Di seguito è riportato un esempio di configurazione proxy Next.js per un centro assistenza ospitato all'indirizzo /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*"],
};

Questo esempio è solo a scopo di riferimento. Utilizza il codice generato nella tua dashboard, poiché i valori sono specifici del tuo centro assistenza, del tuo dominio e del sottopercorso selezionato.

Distribuisci il tuo progetto Vercel

Dopo aver aggiunto il file proxy e configurato il matcher, distribuisci le modifiche a Vercel.

Conferma le modifiche

Carica il tuo codice nel tuo repository Git

Attendi il completamento dell'implementazione di Vercel.

Una volta che l'implementazione sarà attiva, le richieste al sottopercorso selezionato verranno instradate tramite il proxy e gestite dal centro assistenza Notiondesk.

Verifica la tua configurazione

Una volta completata l'implementazione, verifica che il tuo centro assistenza funzioni correttamente.

Apri la pagina iniziale del tuo centro assistenza. Quindi apri l'URL di un articolo noto e verifica che la pagina si carichi correttamente.

Confermare quanto segue:

Il centro assistenza viene caricato sotto il tuo dominio principale

Le pagine degli articoli si aprono correttamente

Immagini, stili e script vengono caricati correttamente

L'URL del browser rimane sul tuo dominio personalizzato

Il sito web principale continua a funzionare anche al di fuori del sottopercorso del centro assistenza.

Se tutto si carica correttamente, la configurazione dell'hosting di subpath è completa!

Indice