# Getting Started

Learn what Nextly is, understand its core concepts, and get up and running quickly.

Nextly is an open-source content platform 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.

```typescript title="nextly.config.ts"
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](https://nextlyhq.com/docs/schema-builder.md) for the full walkthrough.

### Same API, Either Way

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

```typescript title="src/app/blog/page.tsx"
import nextlyConfig from "../../../nextly.config";
import { getNextly } from "nextly";

export default async function BlogPage() {
  const nextly = await getNextly({ config: nextlyConfig });
  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](https://nextlyhq.com/docs/configuration/collections.md) 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](https://nextlyhq.com/docs/configuration/singles.md).

### Fields

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

* **Basic:** [`text`](https://nextlyhq.com/docs/configuration/fields.md#text), [`textarea`](https://nextlyhq.com/docs/configuration/fields.md#textarea), [`richText`](https://nextlyhq.com/docs/configuration/fields.md#rich-text), [`email`](https://nextlyhq.com/docs/configuration/fields.md#email), [`password`](https://nextlyhq.com/docs/configuration/fields.md#password), [`code`](https://nextlyhq.com/docs/configuration/fields.md#code), [`number`](https://nextlyhq.com/docs/configuration/fields.md#number), [`checkbox`](https://nextlyhq.com/docs/configuration/fields.md#checkbox), [`date`](https://nextlyhq.com/docs/configuration/fields.md#date)
* **Selection:** [`select`](https://nextlyhq.com/docs/configuration/fields.md#select), [`radio`](https://nextlyhq.com/docs/configuration/fields.md#radio), [`chips`](https://nextlyhq.com/docs/configuration/fields.md#chips)
* **Media:** [`upload`](https://nextlyhq.com/docs/configuration/fields.md#upload)
* **Relationship:** [`relationship`](https://nextlyhq.com/docs/configuration/fields.md#relationship)
* **Layout:** [`repeater`](https://nextlyhq.com/docs/configuration/fields.md#repeater), [`group`](https://nextlyhq.com/docs/configuration/fields.md#group)
* **Component:** [`component`](https://nextlyhq.com/docs/configuration/fields.md#component)
* **Advanced:** [`json`](https://nextlyhq.com/docs/configuration/fields.md#json)

See [Fields](https://nextlyhq.com/docs/configuration/fields.md) for every option per field with examples.

### Field Groups

Field groups are reusable field structures that can be embedded in collections, singles, or other field groups. Define a field group once (like an SEO block or a CTA section), then use it across multiple content types. See [Field Groups](https://nextlyhq.com/docs/configuration/field-groups.md).

### 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](https://nextlyhq.com/docs/admin.md) for the full overview.

## Prerequisites

* **Node.js** `^20.19.0 || ^22.12.0 || >=24.0.0` (Node 23 and Node 20 before 20.19 are not supported)
* **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](https://nextlyhq.com/docs/database/sqlite.md))
* Basic familiarity with Next.js and TypeScript

## Next Steps

* [Installation](https://nextlyhq.com/docs/getting-started/installation.md) -- Install Nextly in your project
* [Quick Start](https://nextlyhq.com/docs/getting-started/quick-start.md) -- Build a blog, step by step
* [Project Structure](https://nextlyhq.com/docs/getting-started/project-structure.md) -- Understand how a Nextly project is organised
* [Configuration](https://nextlyhq.com/docs/configuration.md) -- Full configuration reference for collections, singles, and fields