Subpfad-Hosting mit Vercel einrichten

Sie können Ihr Notiondesk Hilfezentrum auf einem Unterpfad Ihrer Website mit Hilfe von Vercel und Next.js hosten.

Anstatt beispielsweise eine Subdomain wie help.yourdomain.com zu verwenden, können Sie Ihr Hilfecenter unter folgenden Adressen bereitstellen: yourdomain.com/help, yourdomain.com/docs oder yourdomain.com/support

Diese Konfiguration ist nützlich, wenn Ihre Website bereits bei Vercel gehostet wird und Sie möchten, dass Ihre Dokumentation, Wissensdatenbank oder Supportinhalte unter derselben Domain bleiben.

In diesem Leitfaden erfahren Sie, wie Sie einen Next.js-Proxy konfigurieren, damit Besucher über den von Ihnen gewählten Unterpfad direkt auf Ihr Hilfecenter zugreifen können, während Ihre Hauptwebsite unverändert bleibt.

Bevor Sie beginnen

Bevor Sie das Subpath-Hosting mit Vercel einrichten, stellen Sie sicher, dass Sie Folgendes haben:

Ein bestehendes Notiondesk Hilfezentrum

Zugriff auf Ihr Vercel-Projekt

Zugriff auf Ihre Website-Quellcodebasis

Eine auf Vercel bereitgestellte Website

Ein Unterpfad, den Sie für Ihr Hilfecenter verwenden möchten, zum Beispiel:
- /help
- __RESERVIERT_20__
- /support

Subpath-Hosting in Notiondesk aktiviert

Diese Anleitung setzt voraus, dass Ihre Website mit Next.js erstellt und auf Vercel bereitgestellt wurde. Unterstützung für andere Anbieter finden Sie hier: Hosten Sie Ihr Hilfezentrum in einem Unterpfad .

Unterpfad-Hosting in Notiondesk aktivieren

Öffnen Sie Ihr Notiondesk-Dashboard und gehen Sie zu Settings > General.

Scrollen Sie zum Abschnitt Domains und aktivieren Sie dann den Schalter Subpath.

Wählen Sie Vercel als Einrichtungsanbieter aus. Notiondesk generiert den Vercel-/Next.js-Proxy-Code für Ihr Hilfezentrum.

Kopieren Sie den generierten Code. Sie werden ihn im nächsten Schritt Ihrem Next.js-Projekt hinzufügen.

Fügen Sie die Proxy-Datei zu Ihrem Next.js-Projekt hinzu.

Nachdem Sie den generierten Code aus Notiondesk kopiert haben, fügen Sie ihn Ihrem Next.js-Projekt hinzu.

Der Dateiname hängt von Ihrer Next.js-Version ab:

Für Next.js 15 oder älter verwenden Sie middleware.ts.

Für Next.js 16 oder höher verwenden Sie proxy.ts.

Fügen Sie die Datei im Stammverzeichnis Ihres Projekts hinzu:

Oder, falls Ihr Projekt ein src-Verzeichnis verwendet:

Für Next.js 16 oder höher verwenden Sie denselben Speicherort, jedoch mit proxy.ts.

Fügen Sie den von Notiondesk generierten Code in diese Datei ein.

Dieser Proxy leitet Anfragen von Ihrem ausgewählten Unterpfad, wie z. B. /help, an Ihr Notiondesk Hilfezentrum weiter, ohne die URL im Browser zu ändern.

Konfigurieren Sie den Matcher

Der Matcher teilt Next.js mit, welche Routen vom Notiondesk-Proxy verarbeitet werden sollen.

Für ein Hilfecenter, das unter /help gehostet wird, sollte der Matcher Folgendes enthalten:

Wenn Sie einen anderen Unterpfad verwenden, z. B. /docs oder /support, ersetzen Sie /help durch Ihren gewählten Unterpfad.

middleware.ts

src/middleware.ts

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

Die Route ist erforderlich. Ohne sie funktionieren einige Ressourcen und die Funktionen des Hilfecenters möglicherweise nicht ordnungsgemäß./_nd/:path*

Vercel / Next.js Proxy-Beispiel

Nachfolgend ein Beispiel für eine Next.js-Proxy-Konfiguration für ein Hilfecenter, das unter /help gehostet wird.

// 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*"],
};

Dieses Beispiel dient nur als Referenz. Verwenden Sie den in Ihrem Dashboard generierten Code, da die Werte spezifisch für Ihr Hilfecenter, Ihre Domäne und den ausgewählten Unterpfad sind.

Stellen Sie Ihr Vercel-Projekt bereit

Sobald Sie die Proxy-Datei hinzugefügt und den Matcher konfiguriert haben, stellen Sie die Änderungen in Vercel bereit.

Übernehmen Sie Ihre Änderungen

Lade deinen Code in dein Git-Repository hoch.

Warten Sie, bis die Vercel-Bereitstellung abgeschlossen ist.

Sobald die Bereitstellung live ist, werden Anfragen an Ihren ausgewählten Unterpfad über den Proxy geleitet und von Ihrem Notiondesk Hilfecenter bedient.

Überprüfen Sie Ihre Konfiguration

Nach Abschluss der Bereitstellung überprüfen Sie bitte, ob Ihr Hilfecenter ordnungsgemäß funktioniert.

Öffnen Sie die Startseite Ihres Hilfecenters. Öffnen Sie anschließend eine bekannte Artikel-URL und vergewissern Sie sich, dass die Seite erfolgreich geladen wird.

Bestätigen Sie Folgendes:

Das Hilfecenter wird unter Ihrer Hauptdomain geladen.

Artikelseiten öffnen sich korrekt

Bilder, Stile und Skripte werden korrekt geladen

Die Browser-URL bleibt auf Ihrer benutzerdefinierten Domain.

Die Hauptwebsite funktioniert weiterhin auch außerhalb des Hilfecenter-Unterpfads.

Wenn alles korrekt geladen wird, ist die Einrichtung Ihres Subpfad-Hostings abgeschlossen!

Inhalt