All Systems Operational
Powered By
profound-logo

レンダラー・プロジェクト

レンダラーのプロジェクトセットアップ

レンダラーをインストールする

レンダラーをプロジェクトに取り込みます:

npm i cms-renderer

プロジェクト構造

プロジェクトでレンダラーを解決する場所を決めます:

src/
    app/
        [...slug]/
            page.tsx

次のステップ

  • 動的なルート処理のためにパラメトリックルーティングを設定する
  • カスタムコンポーネントでレジストリを拡張する
  • ライブ編集のために管理パネルを統合する

私たちの Next.js プロジェクトは、シンプルなキャッチオールルートです

ドキュメントページのように構成されたウェブサイトでは、page.tsx は次のようになります

import NavbarBlock from '@/components/NavbarBlock';
import UIContent from
Continue Reading
Nextパラメトリックルーティング›
'@/components/UIContent'
;
import UIFooter from '@/components/UIFooter';
import UISidebar from '@/components/UISidebar'; // CMS に依存しない私たちのデザインシステム
import ParametricRoutePage from 'cms-renderer/lib/renderer'; // レンダリングとライブプレビューを可能にする Profound CMS レンダラーのプリミティブ
import type { BlockComponentRegistry } from 'cms-renderer/lib/types'; // ブロックレジストリの TypeScript 型
const registry: Partial<BlockComponentRegistry> = {
header: NavbarBlock,
uisidebar: UISidebar,
uicontent: UIContent,
uifooter: UIFooter,
};
interface PageProps {
params: Promise<{ slug: string[] }>;
}
export default async function Page({ params }: PageProps) {
const { slug } = await params;
return (
<ParametricRoutePage
registry={registry}
apiKey={cmsConfig.apiKey}
websiteId={cmsConfig.websiteId}
cmsUrl={cmsConfig.cmsUrl}
params={Promise.resolve({ slug })}
/>
);
}

その後、ページの作成を開始します。この時点でパラメトリックページと静的ページの両方が動作するはずです。

次のステップ

  1. 最新の状態を維持するために、リモートの管理パネルで最も更新された状態とコンポーネントの型を照合する Zod コンポーネントの取得を設定します。
  2. 管理パネルでコンポーネントを使用してパラメトリックページを設定します。
  3. ライブ編集用のプロキシとして管理パネルを統合します。

ハイブリッド

レンダラー・プロジェクトパラメトリックルーティングコンポーネントの種類Sse管理パネルプロキシの設定編集モード対応の静的レンダリングテンプレートビルダーでのスクリプティングCreate Profound Next

ヘッドレス

クイックスタートJsonとクロードコードComponent Zod Pull

Mcp

Mcp

CMS機能

Feat Docs Templateテンプレートビルダー機能Feat トランスレーターFeat 組織

やる気

私たちのアプローチ

専門用語

ハイブリッド対ヘッドレス
profound-logoProfound CMS
⌘K
Admin