What is Nextly?

Nextly is an open-source app framework built on top of Next.js. It gives you everything you need to build content-driven applications: authentication, role-based access control, a media library, email delivery, form handling, and a fully generated admin panel. All of it lives inside your Next.js project as a single codebase with a single deployment.

What makes Nextly different from other frameworks is its dual approach to schema definition. You can define your data schema in TypeScript using code, or you can build it visually using the Schema Builder in the admin panel. Both approaches are first-class citizens, and both produce the same result.

The dual approach

Nextly supports two ways to define your content schema, and you can use either one depending on your workflow.

Code-first with defineCollection()

If you prefer working in your editor, you define collections directly in TypeScript. A collection is a content type with fields, validation rules, and access control. Here is what a simple blog post collection looks like:

const Posts = defineCollection({ slug: "posts", fields: [ text({ name: "title", required: true }), text({ name: "slug", required: true, unique: true }), richText({ name: "content" }), upload({ name: "featuredImage", relationTo: "media" }), select({ name: "status", options: ["draft", "published"], defaultValue: "draft", }), ], }); `

This gives you full type safety, IDE autocomplete, version control through git, and the ability to review schema changes in pull requests. Your content structure is code, and it follows the same development workflow as everything else in your application.

Visual with the Schema Builder

If you prefer a visual workflow, or if you are prototyping and want to move quickly, the Schema Builder in the admin panel lets you create collections without writing any code. Navigate to the Schema Builder, create a new collection, add fields by selecting their type, configure validation and display options, and save. The collection is immediately available in the admin panel and through the API.

The Schema Builder is especially useful for non-technical team members who need to modify content structures without waiting for a developer to write code and deploy. It is also a fast way to prototype a new content type before committing to a code-first definition.

Same result, different paths. Whether you define a collection in TypeScript or build it in the Schema Builder, the outcome is identical. The same database tables, the same API endpoints, the same admin panel experience for content editors.

What is included

Nextly ships with a comprehensive set of features that handle the common requirements of content-driven applications.

• Rich text editor built on Lexical with 25+ features and an extensible plugin system
• Media library with image optimization, resizing, and storage adapters
• Database adapters for PostgreSQL, MySQL, and SQLite, all powered by Drizzle ORM
• Authentication with email/password, JWT access/refresh tokens, and API keys
• Access control with role-based permissions, row-level security, and field-level restrictions
• Lifecycle hooks for running custom logic before and after create, read, update, and delete operations
• Reusable components with defineComponent() for building modular, nestable content blocks
• Form builder plugin with drag-and-drop form creation and spam detection
• Email system with support for Resend, SMTP, and SendLayer providers

You do not need to install these as separate packages or wire them together manually. They are part of the framework and work together out of the box.

How it fits in your app

Nextly is not an external service. It lives inside your Next.js application. The admin panel is served at /admin as part of your app. Your content data is stored in your own database. Your API routes are part of your Next.js API layer.

This means a single codebase, a single deployment, and no network overhead when accessing your content from server-side code. Nextly provides a Direct API that lets you query your content directly in Server Components without making HTTP requests:

export default async function BlogPage() { const nextly = await getNextly(); const posts = await nextly.find({ collection: "posts", where: { status: { equals: "published" } }, });

return ( <div> {posts.docs.map((post) => ( <article key={post.id}> <h2>{post.title}</h2> </article> ))} </div> ); } `

No fetch calls, no API keys, no serialization. Just direct database queries with full type safety inside your React Server Components.

Getting started

Create a new Nextly project with a single command:

npx create-nextly-app@latest

The CLI walks you through choosing a database adapter, setting up authentication, and configuring your first collection. Within a few minutes you will have a working Next.js application with a full admin panel, authentication, and your first content type ready to go.

Open source, free forever

Nextly is MIT licensed. There is no per-seat pricing, no usage limits, and no vendor lock-in. You self-host on your own infrastructure and own your data completely. The source code is on GitHub, contributions are welcome, and the framework will remain free and open source.

We believe developer tools should be free. The value we create should come from making developers more productive, not from charging them for access to basic functionality.