Configurez l'hébergement de sous-chemins avec Vercel

Vous pouvez héberger votre centre d'aide Notiondesk sur un sous-chemin de votre site web en utilisant Vercel et Next.js.

Par exemple, au lieu d'utiliser un sous-domaine comme help.yourdomain.com, vous pouvez héberger votre centre d'aide à partir de : yourdomain.com/help, yourdomain.com/docs ou yourdomain.com/support.

Cette configuration est utile lorsque votre site web est déjà hébergé sur Vercel et que vous souhaitez que votre documentation, votre base de connaissances ou votre contenu d'assistance restent sous le même domaine.

Dans ce guide, vous apprendrez à configurer un proxy Next.js afin que les visiteurs puissent accéder à votre centre d'aide directement depuis le sous-chemin que vous avez choisi, tout en laissant votre site web principal inchangé.

Avant de commencer

Avant de configurer l'hébergement de sous-chemins avec Vercel, assurez-vous de disposer des éléments suivants :

Un centre d'aide existant Notiondesk

Accès à votre projet Vercel

Accès au code source de votre site web

Un site web déployé sur Vercel

Un sous-chemin que vous souhaitez utiliser pour votre centre d'aide, par exemple :
- __PRÉSERVÉ_21__
- __PRÉSERVÉ_20__
- __PRÉSERVÉ_19__

L'hébergement de sous-chemins est activé dans Notiondesk

Ce guide suppose que votre site web est développé avec Next.js et déployé sur Vercel. Consultez la documentation relative à la prise en charge d'autres fournisseurs ici : Hébergez votre centre d'aide sur un sous-chemin .

Activer l'hébergement de sous-chemin dans Notiondesk

Ouvrez votre tableau de bord Notiondesk et accédez à Settings > General.

Défilez jusqu'à la section Domains, puis activez le commutateur Subpath.

Sélectionnez Vercel comme fournisseur d'installation. Notiondesk générera le code proxy Vercel / Next.js pour votre centre d'aide.

Copiez le code généré. Vous l'ajouterez à votre projet Next.js à l'étape suivante.

Ajoutez le fichier proxy à votre projet Next.js

Après avoir copié le code généré à partir de Notiondesk, ajoutez-le à votre projet Next.js.

Le nom du fichier dépend de votre version de Next.js :

Pour Next.js 15 ou une version antérieure, utilisez middleware.ts

Pour Next.js 16 ou supérieur, utilisez proxy.ts

Ajoutez le fichier à la racine de votre projet :

Ou, si votre projet utilise un répertoire src :

Pour Next.js 16 ou supérieur, utilisez le même emplacement mais avec proxy.ts à la place.

Collez le code généré par Notiondesk dans ce fichier.

Ce proxy transférera les requêtes de votre sous-chemin sélectionné, tel que /help, vers votre centre d'aide Notiondesk sans modifier l'URL dans le navigateur.

Configurer le matcher

Le matcher indique à Next.js quelles routes doivent être gérées par le proxy Notiondesk.

Pour un centre d'aide hébergé sur /help, le comparateur doit inclure :

Si vous utilisez un sous-chemin différent, tel que /docs ou /support, remplacez /help par le sous-chemin que vous avez choisi.

middleware.ts

src/middleware.ts

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

L'itinéraire est obligatoire. Sans lui, certaines ressources et fonctionnalités du centre d'aide risquent de ne pas fonctionner correctement./_nd/:path*

Exemple de proxy Vercel / Next.js

Vous trouverez ci-dessous un exemple de configuration de proxy Next.js pour un centre d'aide hébergé sur /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*"],
};

Cet exemple est fourni à titre indicatif uniquement. Utilisez le code généré dans votre tableau de bord, car les valeurs sont spécifiques à votre centre d'aide, à votre domaine et au sous-chemin sélectionné.

Déployez votre projet Vercel

Une fois le fichier proxy ajouté et le comparateur configuré, déployez les modifications sur Vercel.

Validez vos modifications

Envoyez votre code vers votre dépôt Git.

Attendez la fin du déploiement de Vercel

Une fois le déploiement en direct, les requêtes vers votre sous-chemin sélectionné seront acheminées via le proxy et traitées par votre centre d'aide Notiondesk.

Vérifiez votre configuration

Une fois le déploiement terminé, vérifiez que votre centre d'aide fonctionne correctement.

Ouvrez la page d'accueil de votre centre d'aide. Ouvrez ensuite l'URL d'un article connu et vérifiez que la page se charge correctement.

Confirmez que :

Le centre d'aide se charge sous votre domaine principal

Les pages d'articles s'ouvrent correctement

Les images, les styles et les scripts se chargent correctement.

L'URL du navigateur reste sur votre domaine personnalisé

Le site web principal continue de fonctionner en dehors du sous-chemin du centre d'aide

Si tout se charge correctement, la configuration de votre hébergement de sous-chemin est terminée !

Table des matières