코드와 노코드를 통합하는 오픈소스 비주얼 페이지빌더—React 컴포넌트를 드래그드롭으로 조합하고 기존 코드베이스에 바로 배포합니다.

npm install @plasmicapp/loader-nextjs

// 기존 컴포넌트
export default function HeroSection({ children }) {
  return <div className="hero-section">{children}</div>;
}

// Plasmic에 등록
PLASMIC.registerComponent(HeroSection, {
  props: {
    children: "slot",
  },
});

// pages/index.tsx
import {
  PlasmicComponent,
  PlasmicRootProvider,
} from "@plasmicapp/loader-nextjs";
import { PLASMIC } from "../plasmic-init";

export default function IndexPage() {
  return (
    <PlasmicRootProvider plasmic={PLASMIC}>
      <PlasmicComponent component="Summer22LandingPage" />
    </PlasmicRootProvider>
  );
}