--- title: "Building Your Own Low-Code CMS with Next.js" description: "Sharing how to build a custom Low Code CMS for enterprise needs, based on an open-source Next.js low-code editor and integrating drag-and-drop schema design, dynamic form rendering, and data scheduling." canonical_url: "https://blog.markkulab.net/en/post/build-your-own-low-code-cms" author: "Mark Ku" author_url: "https://blog.markkulab.net/en/author/mark-ku" site: "Mark Ku's Tech Notes" date_published: "2024-07-06 01:01:35 +0800" category: "Frontend" tags: ["nextjs", "cms", "low-code", "react", "frontend", "typescript"] language: "en" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "when reusing or quoting, credit the author and link back to the original" --- # Building Your Own Low-Code CMS with Next.js ## Background These days, more and more companies are adopting various open-source Content Management Systems (CMS) to manage static content. However, over time, these systems often present challenges with integration and customization. While open-source CMSs can accelerate development speed, they also increase the burden on operations, communication, and efficiency. This extra overhead must be carefully considered when choosing an open-source CMS to ensure it can effectively support the company's long-term business growth. ## Goals * Reduce communication costs. Previously, when users had to maintain JSON files, engineers needed to write extra documentation. * Provide a more user-friendly maintenance interface. * Adopt the latest low-code technologies. * Solve the problem of having to configure file uploads and path settings separately. * Address the difficulty of integrating and customizing off-the-shelf CMS solutions. * Enable data scheduling capabilities. ## Concept for a Custom Low-Code Platform ### 1. Designing the Form Structure Engineers drag and drop components to build a schema in JSON format, which is then saved to the database. ### 2. Content Maintenance The form schema, previously designed by an engineer, is retrieved from the database. The application then renders the form based on this JSON schema, allowing users to input their data. ### 3. Page Rendering For page rendering, this API can be called directly to render the page. ## Requirements * File upload functionality. * A product dropdown selection. * When the structure changes, only keep the latest version. * Scheduling capabilities. ## Avoiding Reinventing the Wheel As drag-and-drop technology matures, building a low-code platform from scratch has become both time-consuming and uneconomical. With this in mind, we evaluated several popular low-code editors and Content Management Systems (CMS). Given that our company primarily uses the Next.js tech stack and requires a high degree of customization, we ultimately chose an open-source, Next.js-based low-code editor as our foundation. To further save development time, we decided to purchase a pre-built Next.js template from the market, which included a backend admin system and various components. This allowed us to quickly build a system that meets our business needs while maintaining flexibility and scalability in our development process. * [Github repo](https://github.com/maqi1520/react-antd-low-code) * [Demo](https://low-code.runjs.cool/editor) * [Website Template](https://themeforest.net/item/pickbazar-react-graphql-ecommerce-template/25283305) ### Flowchart and Mockups * [Flowchart (draw.io)](https://drive.google.com/file/d/1WLiov-NIOVuH3R1OyP9yXCRqppAH5pgn/view) ## Learning Resources: * [Drag-and-Drop Technology](https://zhuanlan.zhihu.com/p/654066892) ### Open-Source Next.js Low-Code Code ![image](https://blog.markkulab.net/content/markku/posts/build-your-own-low-code-cms/images/SysKUjEYA.png) [Link](https://github.com/maqi1520/react-antd-low-code/tree/main/src/components/editor/schema) ``` preview => 左側導覽清單的設定 edit => 元件編輯時的預設值 fields => 定義元件 ``` ### Form Validation We use React Hook Form for form validation. ## Defining Data Structures and Frontend Input Components Defining the mapping between data types and their corresponding components: * text > input (Input box) * json > json editor (JSON editor) * html > rich html editor (Rich text editor) * value in array > single select (Single-select dropdown) * array > multi select (Multi-select dropdown) * date > date picker (Date picker) * upload image > single upload (Single image upload) * upload images > multi upload (Multiple image upload) * model select > model select (Product model selector) * true / false > switch (Switch toggle) ## Conclusion By leveraging existing technologies and resources to avoid reinventing the wheel, we can significantly accelerate the development process, reduce costs, and improve product quality. Choosing the right tools and technologies enables a company to meet specific business needs more efficiently. [Demo Video](https://www.loom.com/share/a6ecf60ae0bd4ba5a164870ca4e23bb5) --- ## About this article and its author Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/build-your-own-low-code-cms) License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original ### About the author **[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider - 10+ years senior software engineer, now an AI Builder - Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing - Combining AI Agents and automation to build evolvable product foundations ### Free tools built by the author All of these are free to use: - [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded. - [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer. - [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux. - [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT). - [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single , with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT). - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace. - [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is. - [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT). - [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT). - [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students ### Daily podcasts - [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml - [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml ### Newsletter [Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.