Overview

Use this quick start when you already have a Next.js App Router project and want to hand parts of it over to editors without moving the site into a separate CMS product.

By the end of this guide set, you should have a Dyrected-backed Next.js app with a working admin route, a first schema, starter content, a real frontend render path, and a preview flow that lets editors see what they are changing.

Read the pages in order. Each one assumes the previous step is already working and hands you into the next part of the setup.

The steps

This quick start is meant to feel like one sequence:

1. Step 1: Install Dyrected and choose whether the backend will live in Dyrected Cloud or inside your Next.js app.
2. Step 2: Define a schema that matches what the site really needs to edit.
3. Step 3: Add initial data so a new environment does not start empty.
4. Step 4: Display that content in Next.js.
5. Step 5: Add a visual editor workflow.
6. Step 6: Let editors build custom pages in Next.js when you want approved reusable sections instead of one fixed page shape.

The mental model

In a Next.js project, Dyrected is not a separate website builder. Your app still owns the routes, components, styling, and deployment flow. Dyrected adds three things around that existing app:

• a typed content model in dyrected.config.ts
• an admin experience generated from that model
• content APIs and SDK helpers that your Next.js routes can read from

That split matters because it keeps the handoff clean. Editors can change approved content, while your repo still owns layout, behavior, and anything that would break the frontend if it were made arbitrary.

Recommended path

If you want the fastest first success, start with:

• one routable collection such as pages
• one upload collection such as media
• one or two globals such as navigation or settings
• enough initialData to prove the site renders real CMS data on first load

Do not start with every edge case, every role, and every flexible layout idea. Start with the smallest content model that can survive one real editorial workflow.

Before you begin

This quick start assumes:

• you are using the Next.js App Router
• you are comfortable editing a Next.js codebase directly
• you want the site to stay in your own repo instead of moving rendering into a hosted page builder

If you are still deciding whether Dyrected matches the kind of product or site you are building, start with Use Cases and Concepts.

If you already know the backend will live on Dyrected Cloud and only want the short credential-prep step first, use Setting Up Your Cloud Site before the main install page.

When the framework setup is done and you are ready to give access to another person, use Handing Off to Editors. That shared guide covers the Cloud and self-hosted onboarding paths without tying them to one frontend framework.

Success check

You are on the right guide path if your goal is:

• editors log in at a route like /admin
• content is modeled in code
• your Next.js routes fetch and render Dyrected content directly
• preview stays close to the real frontend instead of becoming a second unpublished site

If that is the target, continue to Installing Dyrected. If you already know you are using Dyrected Cloud and want the short prep step first, read Setting Up Your Cloud Site and then return to the install page.