PageBuilder Next

A Next.js implementation of Magento PageBuilder for rendering Magento PageBuilder content in Next.js applications.

Overview

PageBuilder Next lets you seamlessly render Magento PageBuilder content in your Next.js application. It's designed to be compatible with HTML content created by Magento's PageBuilder while leveraging Next.js features like the Image component for optimized performance.

Features

• 🔄 Compatible with Magento PageBuilder HTML: Renders the same content structure as Magento's PageBuilder
• 📱 Responsive Design: Mobile-first approach with responsive layouts
• 🚀 Next.js 13+ App Router Support: Fully compatible with the latest Next.js features
• 🖼️ Optimized Images: Uses Next.js Image component for optimal performance
• 🧩 Modular Architecture: Easily extendable to support custom content types
• 🔧 TypeScript Support: Fully typed for better developer experience

Installation

npm install pagebuilder-next
# or
yarn add pagebuilder-next

Usage

Basic Example

import { PageBuilder } from 'pagebuilder-next';

// Component that renders Magento PageBuilder content
export default function MyPageComponent({ pageBuilderContent }) {
  return (
    <div className="my-page">
      <PageBuilder content={pageBuilderContent} />
    </div>
  );
}

Detecting PageBuilder Content

import { PageBuilder } from 'pagebuilder-next';
import { isPageBuilderContent } from 'pagebuilder-next/utils';

// Component that detects and renders PageBuilder content
export default function ContentRenderer({ content }) {
  // Check if content is PageBuilder format
  const isPBContent = isPageBuilderContent(content);
  
  if (isPBContent) {
    return <PageBuilder content={content} />;
  }
  
  // Render regular HTML for non-PageBuilder content
  return <div dangerouslySetInnerHTML={{ __html: content }} />;
}

Supported Content Types

The following Magento PageBuilder content types are supported:

• Row
• Column / Column Group
• Text
• Heading
• Buttons
• Image
• Slider
• Banner
• Divider
• HTML Code
• Video
• Map
• Tabs
• Block / Dynamic Block
• Products

Custom Styling

You can customize the appearance of PageBuilder components by providing custom classes:

<PageBuilder 
  content={pageBuilderContent}
  classes={{
    root: "my-custom-pagebuilder-container"
  }}
/>

Development and Customization

Project Structure

src/
  ├── components/
  │   └── PageBuilder/
  │       ├── ContentTypes/      # Individual content type components
  │       │   ├── Row/
  │       │   ├── Column/
  │       │   ├── Text/
  │       │   └── ...
  │       ├── ContentTypeFactory.tsx  # Creates content type instances
  │       ├── ContentTypeRegistry.ts  # Manages content type registration
  │       └── PageBuilder.tsx         # Main component
  ├── hooks/                     # Custom hooks for PageBuilder
  ├── utils/                     # Utility functions
  └── config/                    # Configuration constants

Adding Custom Content Types

To add a custom content type:

1. Create a new component in src/components/PageBuilder/ContentTypes/
2. Add it to the registry in src/components/PageBuilder/ContentTypes/index.ts

Examples

Check out the example in app/pagebuilder-example/page.tsx for a demonstration of PageBuilder in action.

License

MIT

Credits

This project is inspired by and aims to be compatible with Magento's PWA Studio PageBuilder implementation.