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'; // 블록 레지스트리 타입스크립트 타입
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 컴포넌트 pull을 설정하여 원격 관리자 패널의 최신 상태와 동기화되도록 컴포넌트 타입을 검증하세요.
  2. 관리자 패널에서 컴포넌트를 사용해 파라메트릭 페이지를 설정하세요
  3. 실시간 편집을 위한 프록시로 관리자 패널을 통합하세요

하이브리드

렌더러 프로젝트매개변수 라우팅컴포넌트 유형Sse관리자 패널 프록시 설정편집 모드 지원이 있는 정적 렌더링템플릿 빌더에서 스크립팅Create Profound Next

헤드리스

빠른 시작JSON과 Claude 코드Component Zod Pull

Mcp

Mcp

CMS 기능

기능 문서 템플릿템플릿 빌더 기능기능 번역기기능 조직

동기부여

우리의 접근법

용어

하이브리드 대 헤드리스
profound-logoProfound CMS
⌘K
Admin