Getting Started

Nextly is an open-source app framework that embeds directly into your Next.js application. Instead of running a separate server, Nextly lives alongside your frontend code -- same repo, same deployment, same database.

Two Ways to Build

Nextly supports two approaches to defining your content model. You can use either one, or mix them in the same project.

Code-First

Define collections and singles in TypeScript. Your content schema lives in nextly.config.ts, is version-controlled, and generates types automatically.

import { defineConfig, defineCollection, text, richText } from "nextly/config";

const posts = defineCollection({
  slug: "posts",
  labels: { singular: "Post", plural: "Posts" },
  fields: [
    text({ name: "title", required: true }),
    richText({ name: "content" }),
  ],
  // Built-in Draft/Published lifecycle: injects a `status` system column
  // (default 'draft') and adds Save Draft / Publish buttons in the admin.
  status: true,
});

export default defineConfig({
  collections: [posts],
});

Visual Schema Builder

Create and modify collections visually through the admin panel at /admin. The Visual Schema Builder lets you add fields with drag-and-drop, configure validation, and set up relationships -- all without writing config code. Collections created this way generate database tables dynamically and are immediately available through the same API. See Schema Builder for the full walkthrough.

Same API, Either Way

Regardless of how you create a collection, you query it the same way:

import { nextly } from "nextly";

export default async function BlogPage() {
  const { items: posts } = await nextly.find({
    collection: "posts",
    limit: 10,
  });

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Core Concepts

Collections

Collections are repeatable content types -- like blog posts, products, or team members. Each collection gets its own database table and admin UI for managing entries. See Collections for the full reference.

Singles

Singles store one-of-a-kind content -- site settings, navigation menus, footer content. They work like collections but hold a single document instead of many. See Singles.

Fields

Fields define the shape of your content. Nextly ships eighteen field types organised by category:

• Basic: text, textarea, richText, email, password, code, number, checkbox, date
• Selection: select, radio, chips
• Media: upload
• Relationship: relationship
• Layout: repeater, group
• Component: component
• Advanced: json
• Virtual: join

See Fields for every option per field with examples.

Components

Components are reusable field groups that can be embedded in collections, singles, or other components. Define a component once (like an SEO block or a CTA section), then use it across multiple content types. See Components.

Admin Panel

Nextly includes a full admin interface at /admin with role-based access control, a media library, and rich text editing. The admin panel works with both code-first and Visual Schema Builder content. See Admin Panel for the full overview.

Prerequisites

• Node.js 20 or later
• Next.js 16+ (App Router required)
• React 19+
• TypeScript 5+
• A supported database: PostgreSQL (recommended for production), MySQL, or SQLite (local demo only — see the SQLite caveats)
• Basic familiarity with Next.js and TypeScript

Next Steps

• Installation -- Install Nextly in your project
• Quick Start -- Build a blog in 5 minutes
• Project Structure -- Understand how a Nextly project is organised
• Configuration -- Full configuration reference for collections, singles, and fields