Configure o alojamento de subcaminhos com o Vercel.

Aprenda como hospedar sua central de ajuda em um subdiretório como /help usando Vercel e Next.js.

4 min de leitura

Você pode hospedar sua central de ajuda Notiondesk em um subdiretório do seu site usando Vercel e Next.js.

Por exemplo, em vez de usar um subdomínio como help.yourdomain.com, você pode disponibilizar sua central de ajuda em: yourdomain.com/help, yourdomain.com/docs ou yourdomain.com/support.

Essa configuração é útil quando seu site já está hospedado na Vercel e você deseja que sua documentação, base de conhecimento ou conteúdo de suporte permaneçam no mesmo domínio.

Neste guia, você aprenderá como configurar um proxy Next.js para que os visitantes possam acessar sua central de ajuda diretamente do subcaminho escolhido, mantendo seu site principal inalterado.

Antes de começar

Antes de configurar o hospedagem de subcaminhos com a Vercel, certifique-se de ter:

  • Um centro de ajuda existente para Notiondesk
  • Acesso ao seu projeto Vercel
  • Acesso ao código-fonte do seu site.
  • Um site implantado no Vercel
  • Um subcaminho que você deseja usar para sua central de ajuda, como:
    • __PRESERVADO_21__
    • __PRESERVADO_20__
    • __PRESERVADO_19__
  • Hospedagem de subcaminho ativada em Notiondesk

ícone
Este guia pressupõe que seu site foi desenvolvido com Next.js e está hospedado no Vercel. Veja o suporte para outros provedores aqui: Hospede sua central de ajuda em um subdiretório .

Habilitar hospedagem de subcaminho em Notiondesk

Abra seu painel Notiondesk e vá para Settings > General.

Deslize até a seção Domains e, em seguida, ative a opção Subpath.

Selecione Vercel como provedor de configuração. Notiondesk irá gerar o código proxy Vercel/Next.js para sua central de ajuda.

Copie o código gerado. Você o adicionará ao seu projeto Next.js na próxima etapa.

Adicione o arquivo proxy ao seu projeto Next.js.

Após copiar o código gerado de Notiondesk, adicione-o ao seu projeto Next.js.

O nome do arquivo depende da sua versão do Next.js:

  • Para Next.js 15 ou anterior, use middleware.ts
  • Para Next.js 16 ou superior, use proxy.ts

Adicione o arquivo na raiz do seu projeto:

Ou, se o seu projeto utiliza um diretório src:

Para Next.js 16 ou superior, use o mesmo local, mas com proxy.ts em vez de proxy.ts.

Cole o código gerado por Notiondesk neste arquivo.

Este proxy encaminhará as solicitações do seu subcaminho selecionado, como /help, para a sua central de ajuda Notiondesk sem alterar o URL no navegador.

Configure o comparador

O matcher informa ao Next.js quais rotas devem ser tratadas pelo proxy Notiondesk.

Para uma central de ajuda hospedada em /help, o identificador deve incluir:

Se você estiver usando um subcaminho diferente, como /docs ou /support, substitua /help pelo subcaminho escolhido.

middleware.ts
src/middleware.ts

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

icon
O caminho é obrigatório. Sem ele, alguns recursos e funcionalidades da central de ajuda podem não funcionar corretamente./_nd/:path*

Exemplo de proxy Vercel/Next.js

Abaixo está um exemplo de configuração de proxy Next.js para uma central de ajuda hospedada em /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*"],
};

ícone
Este exemplo serve apenas como referência. Utilize o código gerado no seu painel de controle, pois os valores são específicos para sua central de ajuda, domínio e subcaminho selecionado.

Implante seu projeto Vercel

Depois de adicionar o arquivo proxy e configurar o matcher, implante as alterações no Vercel.

  1. Confirme as alterações.
  1. Envie seu código para seu repositório Git.
  1. Aguarde a conclusão da implantação do Vercel.

Após a implantação estar ativa, as solicitações para o subcaminho selecionado serão roteadas através do proxy e atendidas pela sua central de ajuda Notiondesk.

Verifique sua configuração

Após a conclusão da implantação, verifique se a sua central de ajuda está funcionando corretamente.

Abra a página inicial da sua central de ajuda. Em seguida, abra o URL de um artigo conhecido e confirme se a página carrega corretamente.

Confirme que:

  • A central de ajuda é carregada no seu domínio principal.
  • As páginas dos artigos abrem corretamente.
  • Imagens, estilos e scripts são carregados corretamente.
  • O URL do navegador permanece no seu domínio personalizado.
  • O site principal continua funcionando fora do subcaminho da central de ajuda.

Se tudo carregar corretamente, a configuração de hospedagem do seu subdiretório está concluída!

Artigos relacionados

Esta página foi útil?