Install Profound CMS as a proxy

设置管理面板代理

在您的网站上挂载管理面板是一个简单的步骤

为什么需要此设置

这可以确保您的编辑体验顺畅无缝。通过代理将管理面板挂载到您的网站后，您可以在同一个 URL 上编辑网站，并实时直观地预览更改。它还支持覆盖层编辑，从而为网页编辑提供更好的用户体验。

必需步骤

代理设置（有一些注意事项）

代理是项目中的一个 proxy.ts 文件（在 Next.js 16 中；较旧版本的 Next.js 使用 middleware.ts）。它的行为类似于 URL 重写，会将网站的 /admin、/api 和 /auth 端点解析到 CMS。

对于 localhost：必须使用隧道（因为 CMS 无法直接访问 localhost）
在已部署的网站上可以无缝运行

代理设置

// proxy.ts  (Next.js 16 — 较旧版本的 Next.js 使用 middleware.ts)
import { createCmsProxy, cmsProxyMatcher } from 'cms-renderer/lib/proxy';
import type { NextRequest } from 'next/server';

const cmsProxy = createCmsProxy({
  // 要代理到的 CMS 管理端来源。
  upstream: process.env.ADMIN_UPSTREAM_ORIGIN ?? 'https://cms.dev.tryprofound.com',
});

export default async function proxy(request: NextRequest) {
  return cmsProxy(request);
}

export const config = {
  matcher: cmsProxyMatcher,
};

createCmsProxy 返回一个处理程序，您可以使用传入的请求调用它。cmsProxyMatcher 是一个现成的匹配器，涵盖 /admin、/api、/auth，以及由管理端发起的 /_next 和静态资源请求，因此您无需手动编写匹配器数组。

在较旧版本的 Next.js 中，将文件命名为 middleware.ts，并将处理程序导出为 middleware，而不是默认导出：

export async function middleware(request: NextRequest) { return cmsProxy(request); } export const config = { matcher: cmsProxyMatcher };

需要代理其他路径？将 additionalPaths: ['/my-path'] 传递给 createCmsProxy。

现在，您可以访问网站上的 /admin 来打开管理面板。这将启用实时预览。

覆盖层编辑与预览路由

覆盖层和编辑模式由您的预览路由渲染，而不是静态生产路由。管理端会以编辑模式（?edit_mode=true）加载您的网站，该请求由 force-dynamic 路由上的 ParametricRoutePreviewPage 提供服务，并会为您传递 searchParams：

// app/cms-preview_/[...slug]/page.tsx
import { ParametricRoutePreviewPage } from 'cms-renderer/lib/renderer';
import { registry } from '@/lib/registry';
import { cmsConfig } from '@/lib/cms-config';

// 动态渲染 — 允许使用 searchParams 处理 edit_mode
export const dynamic = 'force-dynamic';

interface PageProps {
  params: Promise<{ slug: string[] }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function PreviewPage({ params, searchParams }: PageProps) {
  const { slug } = await params;

  return (
    <ParametricRoutePreviewPage
      registry={registry}
      apiKey={cmsConfig.apiKey}
      websiteId={cmsConfig.websiteId}
      cmsUrl={cmsConfig.cmsUrl}
      params={Promise.resolve({ slug })}
      searchParams={searchParams}
    />
  );
}

您无需手动连接覆盖层——将 searchParams 传递给预览渲染器即可。您的生产路由（app/[...slug]/page.tsx）通过 ParametricRoutePage 保持静态，无需 searchParams。有关完整的双路由设置，请参阅设置混合 CMS 项目。

如何验证

访问网站上的 /admin
系统应要求您登录，并立即打开 CMS 管理面板
从管理端打开您的网站，并确认覆盖层/实时预览会自动生效

覆盖层和实时预览应会自动运行。

后续步骤

请在设置混合 CMS 项目中设置完整的生产路由和预览路由。

Previous‹Setup server sent events (SSE) content refetch NextCEL Scripting in Template Builder›