Features / Components

Build once. Use everywhere.

Define reusable field groups with defineComponent() in code or model them visually in the Schema Builder. Embed across collections, singles, or other components. Nest up to 3 levels deep.

Get Started

Overview

What it does

Components are reusable field groups that you define once and embed anywhere. Think of them like building blocks: an SEO metadata component, a hero section, or a CTA block. Define the fields once, then use thecomponent()field type to embed them in any collection or single.

You can use a component as a single instance (one SEO block per page), as a repeatable list (multiple feature cards), or as a dynamic zone where editors choose from several component types to build flexible layouts.

Each component gets its own database table, and instances are linked to their parent entry via foreign keys. Components can nest up to 3 levels deep, with automatic circular reference detection.

Define Once, Reuse Everywhere

Create a component like SEO metadata or a hero section once, then embed it across any collection, single, or other component.

Nestable Up to 3 Levels

Components can contain other components. Build complex layouts from simple building blocks, up to 3 levels of nesting with circular reference protection.

Dynamic Zones

Let editors choose from multiple component types in a single field. Build flexible page layouts where each section can be a different component.

All Field Types

Components support every field type: text, rich text, uploads, relationships, selects, arrays, groups, and even nested components.

Code Example

Define and use a component

Define components in TypeScript for version control and type safety, or build them visually in the admin panel. Both approaches produce the same reusable component.

Define the component

components/hero.ts

import {
 defineComponent,
 text,
 upload,
 select,
} from"@revnixhq/nextly/config";

export default defineComponent({
 slug:"hero",
 label: { singular:"Hero Section" },
 admin: {
  category:"Blocks",
  icon:"Image",
 },
 fields: [
  text({ name:"heading", required: true }),
  text({ name:"subheading" }),
  upload({
   name:"backgroundImage",
   relationTo:"media",
  }),
  text({ name:"ctaText" }),
  text({ name:"ctaLink" }),
  select({
   name:"alignment",
   options: [
    { label:"Left", value:"left" },
    { label:"Center", value:"center" },
    { label:"Right", value:"right" },
   ],
   defaultValue:"center",
  }),
 ],
});

Use it in a collection

collections/pages.ts

import {
 defineCollection,
 text,
 component,
} from"@revnixhq/nextly/config";

export default defineCollection({
 slug:"pages",
 fields: [
  text({ name:"title", required: true }),
  text({ name:"slug", unique: true }),

  // Single component instance
  component({
   name:"seo",
   component:"seo",
  }),

  // Dynamic zone — editors pick
  // from multiple component types
  component({
   name:"layout",
   components: [
   "hero",
   "cta",
   "testimonial",
   "content",
   ],
   repeatable: true,
   maxRows: 20,
   admin: { isSortable: true },
  }),
 ],
});

Code-defined components are locked in the UI, so edits happen in your codebase. UI-built components can be modified by any admin user.

Nesting

Components inside components

Nest components up to 3 levels deep. Circular references are automatically detected and prevented.

Level 1Collection "pages" component("layout")

Level 2Component "hero" component("cta")

Level 3Component "cta" fields only (max depth)

Each component gets its own database table (comp_hero,comp_cta). Instances are linked to their parent entry via foreign keys.

Start building with Nextly

Free, open source, and yours to own. No sign-up required.

>_npx create-nextly-app@latest

Get Started View on GitHub