Set up Dyrected in a Next.js app in under 5 minutes

This guide assumes you have a Next.js 15+ app. We'll have a working content layer with an admin UI in five minutes.

1. Install the packages

pnpm add @dyrected/next @dyrected/sdk

2. Create your config

Create `dyrected.config.ts` at the root of your project:

export default defineConfig({ collections: [ defineCollection({ slug: 'posts', fields: [ { name: 'title', type: 'text', required: true }, { name: 'body', type: 'richText' }, { name: 'publishedAt', type: 'date' }, ], }), ], }) ```

3. Mount the admin route

Create `app/admin/[[...dyrected]]/route.ts`:

import { createAdminHandler } from '@dyrected/next'

export const { GET, POST } = createAdminHandler({ config }) ```

That's it. Visit `/admin` and you'll see the Dyrected admin UI with your `posts` collection.

4. Query from a server component

const cms = createClient({ baseUrl: process.env.CMS_URL! })

export default async function BlogPage() { const { docs } = await cms.collection('posts').find({ where: { publishedAt: { exists: true } }, })

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

Full type safety — your editor knows the shape of `post` from your config.