ウェブサイトに管理パネルを接続するのは簡単な手順です

なぜこれが必要なのか

これにより、編集エクスペリエンスがスムーズになります。プロキシ経由で管理パネルをウェブサイトに接続すると、同じ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 };

追加のパスをプロキシする必要がありますか？createCmsProxyにadditionalPaths: ['/my-path']を渡してください。

これで、サイトの/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';

// 動的レンダリング — edit_modeでsearchParamsを使用可能にする
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\は必要ありません。2つのルートを使用した完全なセットアップについては、ハイブリッドCMSプロジェクトのセットアップをご覧ください。

確認方法

1. ウェブサイトの/adminにアクセスします
2. ログインを求められ、すぐにCMS管理パネルが開くことを確認します
3. 管理画面からサイトを開き、オーバーレイとライブプレビューが自動的に動作することを確認します

オーバーレイとライブプレビューは自動的に動作するはずです。

次のステップ

ハイブリッドCMSプロジェクトのセットアップで、本番ルートとプレビュールートの完全なセットアップを行ってください。