Stel subpadhosting in met Vercel

Je kunt je Notiondesk helpcentrum hosten op een subpad van je website met behulp van Vercel en Next.js.

In plaats van bijvoorbeeld een subdomein zoals help.yourdomain.com te gebruiken, kunt u uw helpcentrum ook beschikbaar stellen via: yourdomain.com/help, yourdomain.com/docs of yourdomain.com/support.

Deze configuratie is handig wanneer uw website al bij Vercel wordt gehost en u wilt dat uw documentatie, kennisbank of ondersteuningscontent onder hetzelfde domein blijven.

In deze handleiding leer je hoe je een Next.js-proxy configureert, zodat bezoekers rechtstreeks vanuit het door jou gekozen subpad toegang hebben tot je helpcentrum, zonder dat je hoofdwebsite verandert.

Voordat je begint

Voordat u subpadhosting met Vercel instelt, moet u ervoor zorgen dat u het volgende hebt:

Een bestaand Notiondesk helpcentrum

Toegang tot uw Vercel-project

Toegang tot de codebasis van uw website

Een website die is gehost op Vercel.

Een subpad dat u wilt gebruiken voor uw helpcentrum, bijvoorbeeld:
- __GERESERVEERD_21__
- __GERESERVEERD_20__
- __GERESERVEERD_19__

Subpadhosting ingeschakeld in Notiondesk

Deze handleiding gaat ervan uit dat uw website is gebouwd met Next.js en is geïmplementeerd op Vercel. Zie hier de ondersteuning voor andere providers: Host uw helpcentrum op een subpad .

Schakel subpadhosting in in Notiondesk

Open je Notiondesk dashboard en ga naar Settings > General.

Scrol naar het gedeelte Domains en schakel vervolgens de schakelaar Subpath in.

Selecteer Vercel als de installatieprovider. Notiondesk genereert de Vercel/Next.js-proxycode voor uw helpcentrum.

Kopieer de gegenereerde code. Je voegt deze in de volgende stap toe aan je Next.js-project.

Voeg het proxybestand toe aan je Next.js-project.

Nadat je de gegenereerde code van Notiondesk hebt gekopieerd, voeg je deze toe aan je Next.js-project.

De bestandsnaam is afhankelijk van je Next.js-versie:

Voor Next.js 15 of lager, gebruik middleware.ts

Voor Next.js 16 of hoger, gebruik proxy.ts

Voeg het bestand toe aan de hoofdmap van je project:

Of, als uw project een src-directory gebruikt:

Voor Next.js 16 of hoger, gebruik dezelfde locatie, maar met proxy.ts in plaats daarvan.

Plak de code die is gegenereerd door Notiondesk in dit bestand.

Deze proxy stuurt verzoeken van het door u geselecteerde subpad, zoals /help, door naar uw Notiondesk helpcentrum zonder de URL in de browser te wijzigen.

Configureer de matcher

De matcher vertelt Next.js welke routes door de Notiondesk proxy moeten worden afgehandeld.

Voor een helpcentrum dat gehost wordt op /help, moet de matcher het volgende bevatten:

Als u een ander subpad gebruikt, zoals /docs of /support, vervang dan /help door het door u gekozen subpad.

middleware.ts

src/middleware.ts

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

Het pad is vereist. Zonder dit pad werken sommige onderdelen en functionaliteiten van het helpcentrum mogelijk niet correct./_nd/:path*

Vercel / Next.js proxy-voorbeeld

Hieronder vindt u een voorbeeld van een Next.js-proxyconfiguratie voor een helpcentrum dat wordt gehost op /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*"],
};

Dit voorbeeld dient alleen ter referentie. Gebruik de code die in uw dashboard wordt gegenereerd, aangezien de waarden specifiek zijn voor uw helpcentrum, domein en geselecteerde subpad.

Implementeer uw Vercel-project

Nadat je het proxybestand hebt toegevoegd en de matcher hebt geconfigureerd, implementeer je de wijzigingen in Vercel.

Sla je wijzigingen op.

Upload je code naar je Git-repository.

Wacht tot de Vercel-implementatie is voltooid.

Nadat de implementatie live is, worden verzoeken aan het door u geselecteerde subpad via de proxy gerouteerd en afgehandeld door uw Notiondesk helpcentrum.

Controleer uw configuratie.

Controleer na de implementatie of uw helpcentrum correct werkt.

Open de startpagina van uw helpcentrum. Open vervolgens een URL van een bekend artikel en controleer of de pagina correct laadt.

Bevestig dat:

Het helpcentrum wordt geladen onder uw hoofddomein.

Artikelpagina's worden correct geopend.

Afbeeldingen, stijlen en scripts worden correct geladen.

De URL in de browser blijft op uw aangepaste domein.

De hoofdwebsite blijft functioneren, ook buiten het subpad van het helpcentrum.

Als alles correct laadt, is uw subpad-hostingconfiguratie voltooid!

Inhoudsopgave