管理パネル用プロキシの設定
ウェブサイトに管理パネルを取り付けるのは簡単な手順です
これにより、編集体験が途切れることなくシームレスになります。プロキシを介してウェブサイトに管理パネルを接続すると、同じURL上でウェブサイトを編集でき、変更をリアルタイムで視覚的にプレビューできます。 また、オーバーレイ編集が可能になり、ウェブページの編集体験が向上します。
プロキシの設定は、プロジェクト内の proxy.ts ファイルだけで構成されており、URLリライトのように動作し、ウェブサイトの /admin エンドポイントをCMSに解決させます。
localhost の場合: CMSは localhost に直接アクセスできないため、トンネルを使用する必要があります// proxy.ts
import { createCmsProxy } from 'cms-renderer/lib/proxy';
export const proxy = createCmsProxy({
upstream: "https://cms.dev.tryprofound.com", // CMS 管理パネル
});
これで、ウェブサイトから /admin にアクセスすると管理パネルを利用できます。これによりライブプレビューが有効になります。
オーバーレイは自動的に処理されます。レンダラーに searchParams を渡すだけで済みます。
// page.tsx
interface PageProps {
params: Promise<{ slug: string[] }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
export default async function Page({ params, searchParams }: PageProps) {
const { slug } = await params;
return (
<ParametricRoutePage
registry={registry}
apiKey="sk_..."
websiteId="a2717ba3-29db-..."
cmsUrl={"https://cms.dev.tryprofound.com"}
params={Promise.resolve({ slug })}
searchParams={searchParams}
/>
);
}
/admin にアクセスしますオーバーレイとライブプレビューは自動的に機能するはずです。